TypeError: X is not iterable の原因と解決策

概要

TypeError: X is not iterable は、for...of ループや分割代入、スプレッド構文などでイテラブルプロトコルを持たないオブジェクトを使用した際に発生するランタイムエラーです。配列やMapなどのイテラブルオブジェクトが期待される場所に、通常のオブジェクトやnull/undefinedが渡されると発生します。

エラーメッセージ

TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

TypeError: null is not iterable (cannot read property Symbol(Symbol.iterator))

TypeError: obj is not iterable

原因

通常のオブジェクトにfor…ofを使用: プレーンオブジェクトはイテラブルではない
null/undefinedに対する分割代入: APIレスポンスがnullの場合など
配列を期待する場所にオブジェクトを渡している: 関数の戻り値の型ミス
非同期データの未ロード状態: useStateの初期値がundefinedのまま反復処理
Map/Set以外のオブジェクトへのスプレッド構文: イテラブルでない値の展開

解決策

1. オブジェクトの反復にはObject.entries/keysを使う

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const user = { name: "太郎", age: 25, city: "東京" };

// ❌ エラー: プレーンオブジェクトはイテラブルではない
for (const item of user) {
  console.log(item);
}

// ✅ Object.entries()でキーと値のペアを反復
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

// ✅ Object.keys()でキーのみ反復
for (const key of Object.keys(user)) {
  console.log(key);
}

2. Array.isArrayで配列チェック

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function processList(items: unknown) {
  // ❌ エラーの可能性
  for (const item of items as any[]) {
    console.log(item);
  }

  // ✅ 配列チェックを行う
  if (Array.isArray(items)) {
    for (const item of items) {
      console.log(item);
    }
  } else {
    console.error("配列が期待されましたが、別の型が渡されました:", typeof items);
  }
}

3. 分割代入にデフォルト値を設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// ❌ エラー: fetchDataがundefinedを返す場合
const [first, second] = fetchData();

// ✅ デフォルト値を設定
const [first, second] = fetchData() ?? [];

// ✅ Reactのカスタムフックでの安全な分割代入
function useUserData() {
  const [data, setData] = useState<string[]>([]);
  // 初期値を空配列にすることでイテラブルが保証される
  return { data, setData };
}

4. TypeScriptの型ガードで安全にする

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function isIterable<T>(obj: unknown): obj is Iterable<T> {
  return obj != null && typeof (obj as any)[Symbol.iterator] === "function";
}

function safeIterate<T>(data: unknown): T[] {
  if (isIterable<T>(data)) {
    return [...data];
  }
  return [];
}

// 使用例
const items = safeIterate<string>(apiResponse.data);
for (const item of items) {
  console.log(item);
}

5. Reactでの安全な配列レンダリング

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
function ItemList({ items }: { items?: string[] }) {
  // ❌ エラー: itemsがundefinedの場合
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );

  // ✅ デフォルト値またはガード
  return (
    <ul>
      {(items ?? []).map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

TypeError: X is not iterable

概要

エラーメッセージ

原因

解決策

1. オブジェクトの反復にはObject.entries/keysを使う

2. Array.isArrayで配列チェック

3. 分割代入にデフォルト値を設定

4. TypeScriptの型ガードで安全にする

5. Reactでの安全な配列レンダリング

関連エラー

JavaScript の他のエラー