Cannot Read Property of Undefined en JavaScript : 7 Causes et Solutions

#webdev #javascript #beginners #tutorial

Tu as cette erreur dans la console : TypeError: Cannot read properties of undefined (reading 'xxx'). C'est l'erreur JavaScript la plus fréquente au monde. Elle signifie que tu essaies d'accéder à une propriété sur une valeur qui est undefined. Voici les 7 causes les plus courantes — et comment les corriger.

1. Objet non initialisé

// ❌ user est undefined
let user;
console.log(user.name); // TypeError!

// ✅ Initialiser l'objet
let user = { name: 'Ali', age: 25 };
console.log(user.name); // 'Ali'

// ✅ Ou vérifier avant d'accéder
if (user) {
  console.log(user.name);
}

2. Élément DOM qui n'existe pas

querySelector retourne null si l'élément n'est pas trouvé.

// ❌ L'élément n'existe pas dans le HTML
const btn = document.querySelector('#mon-bouton');
btn.addEventListener('click', handler); // TypeError!

// ✅ Vérifier que l'élément existe
const btn = document.querySelector('#mon-bouton');
if (btn) {
  btn.addEventListener('click', handler);
}

3. Donnée asynchrone pas encore arrivée

// ❌ data est undefined au premier rendu
const [data, setData] = useState();
return <p>{data.name}</p>; // TypeError!

// ✅ Optional chaining
return <p>{data?.name ?? 'Inconnu'}</p>;

4. Faute de frappe dans le nom de propriété

const user = { name: 'Ali', email: 'ali@mail.com' };

// ❌ 'emial' au lieu de 'email'
console.log(user.emial.toUpperCase()); // TypeError!

// ✅ Vérifier les noms
console.log(user.email.toUpperCase()); // 'ALI@MAIL.COM'

5. Oublier le return dans map/find

const users = [{ id: 1, name: 'Ali' }, { id: 2, name: 'Sara' }];

// ❌ find ne trouve rien → undefined
const user = users.find(u => u.id === 99);
console.log(user.name); // TypeError!

// ✅ Vérifier le résultat
const user = users.find(u => u.id === 99);
if (user) {
  console.log(user.name);
}

6. Déstructurer un objet undefined

// ❌ Si getUser() retourne undefined
const { name, email } = getUser(); // TypeError!

// ✅ Valeur par défaut
const { name, email } = getUser() ?? {};

7. Accéder à un objet imbriqué profondément

// ❌ user est null → crash
console.log(response.data.user.address.city); // TypeError!

// ✅ Optional chaining (?.)
console.log(response.data.user?.address?.city); // undefined (pas de crash)

// ✅ Avec valeur par défaut
const city = response.data.user?.address?.city ?? 'Non renseignée';

Comment debugger

Lire le message : Cannot read properties of undefined (reading 'name') → la variable AVANT .name est undefined
console.log juste avant la ligne qui crash
Remonter la chaîne : si a.b.c crash, vérifier a, puis a.b, puis a.b.c

Résumé

Cause	Solution rapide
Variable non initialisée	`let x = {}`
Élément DOM absent	`if (el) { ... }`
Donnée async pas prête	Loading state + optional chaining
Faute de frappe	TypeScript ou linter
find() sans résultat	Vérifier avant d'accéder
Déstructuration unsafe	`?? {}` par défaut
Objet imbriqué	Optional chaining `?.`

Article original sur gogokodo.com

DEV Community