Next.jsのエラー"Uncaught TypeError:cannot read properties of null (reading '0')"の原因

はじめに

こんにちは、Next.jsを学んで半年になります。

firestoreから取得したデータを保持して使いまわしをしたいと思いuseStateを用いたのですが、"Uncaught TypeError:cannot read properties of null (reading '0')"このようなエラーに遭遇しました。

自分なりに考えた原因と解決策を残したいと思います。

useStateの使い方

useStateは値をコンポーネントの中で保持し、その値を更新して再度保持して、表示できる機能です。

1つ例を挙げます。

const [count, setCount] = useState(0)

この場合ステートの値がcount、変更するための関数がsetCountになります。

setCountは別途用意します。

const clickFunc = () => {
    setCount(count + 1)
}

これでクリックをするとsetCountが呼び出され、元のカウント数に+1した値をカウント数として持っておくことができます。

エラーが表示された原因

"Uncaught TypeError:cannot read properties of null (reading '0')"

このエラーはuseState(null)の時に出るエラーだということが分かりました。

しかし、useStateの中身をnull以外に変えてもエラーは無くなりませんでした。

実はuseStateの使う場所に問題がありました。

useStateは関数コンポーネントの中で使える値でしたが、私が使っていたのはただの関数の中でした。

つまり、ただの関数内でuseStateは使うことができないということです。

結論

各ページごとに値を保持しておくことはできてもそれを共有することは難しいので、必要になったタイミングごとにデータベースにアクセスするのが適策ではないかと思いました。