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>