空っぽのものの中身を読もうとした
TypeError: Cannot read properties of undefined (reading 'map')
ひとことで言うと
「まだ中身が入っていない（undefined や null の）ものから、さらに中身を取り出そうとしました」という意味です。いちばんよく出るエラーの1つです。
よくある原因
- データを読み込む前に、画面に表示しようとした
- APIから返ってきたデータの形が、思っていたものと違う
- 名前の打ち間違いで、別のもの（存在しないもの）を見ている
自分で確かめること
- エラーの「reading 'map'」の部分で、何を読もうとしたか見る
- そのデータを
console.logで表示して、中身が入っているか見る - データが届く前（読み込み中）のときの表示を作ってあるか見る
たいていは、こうすると直ります
data?.items ?? [] のように、中身がないときの書き方にするか、読み込み中の表示を作ります。
AIへの伝え方
下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。
次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。 【エラー】 TypeError: Cannot read properties of undefined (reading 'map') 【やったこと】 （ここに、エラーが出る前にしたことを書く。例：npm run dev を実行した） 【参考】 このエラーは「空っぽのものの中身を読もうとした」というもので、よくある原因は次のとおりです。 ・データを読み込む前に、画面に表示しようとした ・APIから返ってきたデータの形が、思っていたものと違う ・名前の打ち間違いで、別のもの（存在しないもの）を見ている どれに当てはまるかを確かめる方法も教えてください。