TypeError: Cannot read properties of undefined — 原因と解決方法

エラー内容

TypeError: Cannot read properties of undefined (reading 'xxx')

JavaScriptで最も頻繁に遭遇するエラーの一つ。undefined な値のプロパティにアクセスしようとすると発生する。

const data = await fetch('/api/users').then(r => r.json());
// data.users が undefined の場合
console.log(data.users.length); // TypeError!

解決方法: オプショナルチェーンを使う。

console.log(data.users?.length ?? 0);

const items = [1, 2, 3];
console.log(items[5].toString()); // TypeError!

解決方法: 存在チェックを行う。

const item = items[5];
if (item !== undefined) {
  console.log(item.toString());
}

Reactコンポーネントでstateが初期化される前にレンダリングされるケース。

const [user, setUser] = useState<User>();

// 初回レンダリング時に user は undefined
return <div>{user.name}</div>; // TypeError!

解決方法: ガード句またはローディング状態を使う。

if (!user) return <div>Loading...</div>;
return <div>{user.name}</div>;