Next.jsで配列をmapで出力しようとした時にTypeError: Cannot read properties of undefined (reading 'map')が出ることがある。

これはコンポーネントなどで変数が空だからエラーになっているため、変数が存在する時だけ実行するか、空変数の場合はから配列を代入することで対応する。

// NG
<ul>
    {list.map((name, i) => (
        <li key={i}>{name}</li>
    ))}
</ul>

// OK: 変数が存在するときだけ実行
<ul>
    {list?.map((name, i) => (
        <li key={i}>{name}</li>
    ))}
</ul>

// OK: 空変数には空配列を代入して実行
<ul>
    {(list || []).map((name, i) => (
        <li key={i}>{name}</li>
    ))}
</ul>