egao_
@egao_

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

TypeScript型エラー

解決したいこと

ReactをTypeScriptで開発しています。
firebaseからコレクションのデータを取得する処理を記述しています。
データをuseStateにセットする際に以下のエラーが発生しました。

発生している問題・エラー

型 '{ id: string; }[]' の引数を型 'SetStateAction<undefined>' のパラメーターに割り当てることはできません。
  型 '{ id: string; }[]' にはシグネチャ '(prevState: undefined): undefined' に一致するものがありません。

該当するソースコード

const Home = () => {
  const [recruitmentList, setRecruitmentList] = useState();
  useEffect(() => {
    const getPosts = async () => {
      const data = await getDocs(collection(db, "recruitment_posts"));
      setRecruitmentList(
        data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
      );
    };
    getPosts();
  }, []);

この行で該当エラーが出ています

data.docs.map((doc) => ({ ...doc.data(), id: doc.id }))

上記のコードをコンソールにログ出力するとこのようなオブジェクト配列の値が取得できます。(firebaseに登録したデータ2件)
image.png

自分で試したこと

useStateの初期値のところで型宣言が必要と思われるのですが、
適切な型がわかりません。

const [recruitmentList, setRecruitmentList] = useState();
0

1Answer

recruitmentList には { id: string; } 型オブジェクトの配列を入れたいので、指定する型は { id: string; }[] となります。(Array<{ id: string; }> と書いても同じ意味です。)

useState の型を明示するには、以下のように山括弧で囲んだ型名を関数名の後に置きます。

useState<{ id: string; }[]>([])

ここで初期値に指定している空配列は必要です。指定しないと undefined が初期値になりますが、 { id: string; }[] と一致しないので型エラーになります。

0Like

Comments

  1. @egao_

    Questioner

    エラー解決できました!コメントありがとうございます!

Your answer might help someone💌