Corriger l'erreur « TypeError: Cannot Read Property of Undefined » en JavaScript

L’erreur « Cannot read property of undefined » arrête plus d’applications JavaScript que presque toute autre erreur d’exécution. Que vous récupériez des données depuis une API, rendiez des composants React ou traitiez des entrées utilisateur, cette TypeError JavaScript apparaît lorsque votre code tente d’accéder à une propriété sur quelque chose qui n’existe pas encore.

Cet article explique pourquoi cette erreur se produit, comment la corriger avec des solutions JavaScript modernes comme le chaînage optionnel, et comment l’éviter dans vos applications React et TypeScript.

Pourquoi cette erreur se produit en JavaScript moderne

La TypeError se produit lorsque JavaScript tente de lire une propriété depuis undefined. Vous la verrez sous la forme « Cannot read property » ou « Cannot read properties » selon la version de votre navigateur — les deux font référence à la même erreur d’exécution.

Causes courantes dans des cas réels

Données asynchrones pas encore prêtes

// API data hasn't arrived
const [user, setUser] = useState()
return <div>{user.name}</div> // TypeError!

État React non initialisé

const [profile, setProfile] = useState() // undefined by default
useEffect(() => {
  console.log(profile.id) // Crashes immediately
}, [])

Accès à des propriétés imbriquées

// Server response might be incomplete
const city = response.data.user.address.city // Any level could be undefined

Ces scénarios partagent un problème de timing : votre code s’exécute avant que les données n’existent. Dans React, cela se produit souvent lors du premier rendu ou lorsque le double rendu du StrictMode en développement expose des problèmes d’état non initialisé.

Solutions modernes : chaînage optionnel et coalescence des nuls

JavaScript fournit désormais des solutions élégantes qui remplacent les patterns de vérification verbeux. Ces fonctionnalités ES2020+ constituent l’approche standard aujourd’hui.

Chaînage optionnel (?.)

Le chaînage optionnel arrête l’évaluation lorsqu’il rencontre undefined ou null, retournant undefined au lieu de lever une exception :

// Modern approach (ES2020+)
const userName = user?.profile?.name
const firstItem = items?.[0]
const result = api?.getData?.()

// Old guard pattern (still works, but verbose)
const userName = user && user.profile && user.profile.name

Coalescence des nuls (??)

Combinez le chaînage optionnel avec la coalescence des nuls pour fournir des valeurs de repli :

// Only falls back for null/undefined (not empty strings or 0)
const displayName = user?.name ?? 'Anonymous'
const itemCount = data?.items?.length ?? 0

// Different from OR operator
const port = config?.port || 3000  // Falls back for 0, '', false
const port = config?.port ?? 3000  // Only for null/undefined

Patterns spécifiques aux frameworks

React : gérer correctement l’état undefined

Les erreurs undefined dans React se produisent couramment avec un état non initialisé ou lors d’opérations asynchrones :

function UserProfile() {
  // Initialize with null, not undefined
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data)
      setLoading(false)
    })
  }, [])

  // Conditional rendering prevents errors
  if (loading) return <div>Loading...</div>
  if (!user) return <div>No user found</div>
  
  // Safe to access user properties here
  return <div>{user.name}</div>
}

Important : Ne désactivez pas le StrictMode pour « corriger » les problèmes de double rendu. Initialisez plutôt l’état correctement et utilisez le rendu conditionnel.

TypeScript : prévention à la compilation

La sécurité des valeurs nulles de TypeScript détecte ces erreurs avant l’exécution grâce aux vérifications strictes des valeurs nulles :

// tsconfig.json
{
  "compilerOptions": {
    "strictNullChecks": true
  }
}

interface User {
  name: string
  email?: string // Optional property
}

function greetUser(user: User | undefined) {
  // TypeScript error: Object possibly 'undefined'
  console.log(user.name) // ❌
  
  // Correct approaches
  console.log(user?.name) // ✅
  if (user) console.log(user.name) // ✅
}

Attention : Évitez les assertions non-null (user!.name) comme « correctif » — elles contournent la sécurité de TypeScript et peuvent causer des erreurs d’exécution.

Bonnes pratiques pour la prévention

Initialisez l’état de manière significative

// Bad: undefined state
const [data, setData] = useState()

// Good: explicit initial state
const [data, setData] = useState(null)
const [items, setItems] = useState([])
const [config, setConfig] = useState({ theme: 'light' })

Utilisez des états de chargement pour les données asynchrones

function DataDisplay() {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null
  })

  // Render based on state
  if (state.loading) return <Spinner />
  if (state.error) return <Error message={state.error} />
  if (!state.data) return <Empty />
  
  return <DataView data={state.data} />
}

Validez les réponses API

async function fetchUserSafely(id) {
  try {
    const response = await api.get(`/users/${id}`)
    
    // Validate structure before using
    if (!response?.data?.user) {
      throw new Error('Invalid response structure')
    }
    
    return response.data.user
  } catch (error) {
    console.error('Fetch failed:', error)
    return null // Return predictable fallback
  }
}

Conclusion

La TypeError « Cannot read property of undefined » concerne fondamentalement le timing et la disponibilité des données. Les opérateurs de chaînage optionnel (?.) et de coalescence des nuls (??) du JavaScript moderne fournissent des solutions claires et lisibles qui remplacent les anciens patterns de vérification. Dans React, une initialisation appropriée de l’état et le rendu conditionnel préviennent la plupart des problèmes, tandis que les vérifications strictes des valeurs nulles de TypeScript détectent les erreurs à la compilation.

La clé est de reconnaître que les valeurs undefined sont naturelles dans le monde asynchrone de JavaScript — gérez-les explicitement plutôt que d’espérer qu’elles ne se produiront pas.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.