هذا الخطأ من أكثر أخطاء JavaScript شيوعًا على الإطلاق، ويظهر بصيغة:
TypeError: Cannot read properties of undefined (reading 'name')
لنفهم سببه ونحلّه خطوة بخطوة.
ماذا يعني الخطأ؟
ببساطة: حاولت قراءة خاصية من شيء قيمته undefined. مثلًا:
const user = undefined;
console.log(user.name); // ❌ Cannot read properties of undefined (reading 'name')
user لا يحمل كائنًا، فلا توجد خاصية name لقراءتها.
الأسباب الشائعة وحلولها
1) البيانات لم تصل بعد (API)
أكثر سبب شيوعًا: تقرأ نتيجة طلب لم ينتهِ.
// ❌ data قد تكون undefined أثناء التحميل
return <p>{data.title}</p>;
// ✅ تحقّق أولًا
if (!data) return <p>جارٍ التحميل...</p>;
return <p>{data.title}</p>;
2) خطأ إملائي في اسم الخاصية
const user = { name: "Sara" };
console.log(user.Name); // undefined ثم خطأ عند التسلسل
3) عنصر غير موجود في مصفوفة
const arr = [];
console.log(arr[0].id); // ❌ arr[0] هي undefined
الحلّ الأقوى: Optional Chaining ?.
المعامل ?. يوقف القراءة بأمان إذا كانت القيمة undefined:
console.log(user?.name); // undefined بدل خطأ
console.log(arr[0]?.id); // آمن
console.log(data?.user?.email); // تسلسل آمن
ولإعطاء قيمة افتراضية، اجمعه مع ??:
const name = user?.name ?? "زائر";
جدول الحلول السريعة
| السبب | الحلّ |
|---|---|
| بيانات API غير جاهزة | تحقّق if (!data) return ... |
| تسلسل خصائص عميق | استخدم ?. |
| قيمة قد تكون مفقودة | أعطِ افتراضيًّا بـ ?? |
| خطأ إملائي | راجع اسم الخاصية |
الخلاصة
الخطأ يخبرك أنك تقرأ من undefined. تتبّع أي متغيّر هو undefined (اطبعه بـ
console.log)، ثم احمِ الوصول بـ ?. وقيمة افتراضية بـ ??.