L’erreur Cannot read properties of undefined (reading 'name') veut dire qu’un accès à .name a été tenté sur une valeur undefined. Le nom entre parenthèses désigne la propriété recherchée, pas forcément la variable absente.
Repérer exactement la valeur absente
Prenez ce code :
const nom = response.user.profile.name;L’erreur peut venir de response, de response.user ou de response.user.profile. Consultez la première ligne de votre code dans la pile d’erreur, posez un point d’arrêt juste avant l’accès et inspectez chaque niveau. Si vous journalisez des données réelles, retirez les identifiants et secrets des captures partagées.
Un accès protégé temporaire aide à observer la forme des données :
console.log({ response, user: response?.user, profile: response?.user?.profile });Retirez ce journal une fois le problème identifié, surtout si la réponse contient des données personnelles.
Distinguer les causes courantes
| Situation | Vérification | Correction adaptée |
|---|---|---|
| Donnée pas encore chargée | État initial avant la réponse asynchrone | Afficher un état de chargement puis vérifier la réponse |
| Réponse API différente de celle attendue | Corps réel, statut HTTP et contrat API | Corriger le chemin d’accès ou le contrat |
| Élément absent d’un tableau | Résultat de find() ou index calculé |
Traiter explicitement le cas « introuvable » |
| Valeur facultative | Type ou spécification du champ | Utiliser une valeur de repli adaptée |
| Erreur d’orthographe | Nom de propriété et casse | Corriger le nom à sa source |
fetch() ne rejette pas automatiquement une réponse HTTP 404 ou 500. Vérifiez response.ok avant de supposer que le JSON a la structure d’une réponse réussie.
Corriger selon le contrat des données
Si le profil est obligatoire, échouez avec un message clair plutôt que de masquer l’anomalie :
function lireNom(user) {
if (!user || !user.profile || typeof user.profile.name !== "string") {
throw new Error("Profil utilisateur incomplet");
}
return user.profile.name;
}Si le profil est facultatif, représentez ce choix dans l’interface :
const nomAffiche = user?.profile?.name ?? "Nom non renseigné";L’opérateur ?. arrête l’accès si la valeur à gauche est null ou undefined. ?? applique le repli uniquement pour null et undefined ; une chaîne vide reste une chaîne vide. Choisissez le repli selon ce que signifie réellement « absent » dans votre produit.
Attendre une donnée asynchrone
Lorsqu’un chargement est encore en cours, n’accédez pas au résultat comme s’il existait déjà :
const response = await fetch("/api/user");
if (!response.ok) {
throw new Error(`Échec du chargement : HTTP ${response.status}`);
}
const user = await response.json();
const nom = lireNom(user);Cet exemple suppose que /api/user renvoie directement un utilisateur. Si l’API renvoie { user: ... }, passez data.user à lireNom. Dans une interface, affichez séparément les états « chargement », « erreur » et « données prêtes » ; ne confondez pas une réponse absente avec un nom facultatif.
Éviter la régression
Testez au moins une réponse valide, une réponse sans profil et une erreur HTTP. Si vous utilisez TypeScript, décrivez correctement les champs facultatifs dans le type. Une assertion ! ou un cast peut faire taire le compilateur, mais ne crée pas la donnée manquante à l’exécution.