TypeError: Cannot read properties of null

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// ❌ エラー
const name = user.profile.name;

// ✅ オプショナルチェーンで安全にアクセス
const name = user?.profile?.name;

// メソッド呼び出しにも使える
const result = obj?.method?.();

// 配列アクセスにも使える
const first = arr?.[0]?.name;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// ❌ エラー
function processUser(user: User | null) {
  console.log(user.name);
}

// ✅ nullチェックを先に行う
function processUser(user: User | null) {
  if (user === null) {
    console.log("ユーザーが見つかりません");
    return;
  }
  console.log(user.name); // ここではuserはUser型に絞り込まれる
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// ❌ エラー: 要素が存在しない場合にnullが返る
const element = document.getElementById("my-input");
element.addEventListener("click", handler);

// ✅ 存在チェックを行う
const element = document.getElementById("my-input");
if (element) {
  element.addEventListener("click", handler);
}

// ✅ TypeScriptでは非nullアサーション（要素の存在が確実な場合のみ）
const element = document.getElementById("my-input")!;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// ❌ エラー: dataがnullの間にアクセスしてしまう
function UserProfile() {
  const [data, setData] = useState<User | null>(null);

  useEffect(() => {
    fetchUser().then(setData);
  }, []);

  return <div>{data.name}</div>; // 初回レンダリングでエラー
}

// ✅ 条件付きレンダリングで安全に表示
function UserProfile() {
  const [data, setData] = useState<User | null>(null);

  useEffect(() => {
    fetchUser().then(setData);
  }, []);

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

  return <div>{data.name}</div>;
}

1
2
3
4
5
6
7
8
9

// ❌ エラーの可能性
const value = response.data.items.length;

// ✅ デフォルト値を設定
const items = response?.data?.items ?? [];
const value = items.length;

// ✅ 関数の戻り値にも使える
const config = getConfig() ?? { timeout: 3000 };