TypeScript 配列の中身がオブジェクトでのuseStateの使用について

Question

【やりたいこと】
firestoreから取得したデータの一覧をuseStateを使用してstateに格納したい。

【行なっている事】

type account =  {
    firstName: string,
    lastName: string,
}[];

function list(): ReactElement {
    const [account, setAccount] = useState<account>();
    const getAccountData = async() => {
        const accountListTable = db.collection('accountList');
        await accountListTable.get()
        .then((snapshot)=> {
            snapshot.forEach((doc) => {
                setAccount({...account, doc.data()});
            });
        })
        .catch((e)=> {
            console.log(e);
        });
    };
　　　　　　　getAccountData（）；

    return(
        <div>
            ...
        </div>
    );
}

【処理の流れ】
1.accountというstateがあります。
2.firestoreにてaccountListコレクションからアカウントの一覧を取得します。
doc.data()の中身は下記のようになっています。

{
    firstName: '太郎',
    lastName: '山田',
}

3.doc.data()の値をaccountに格納したいです。
accountの中身は下記を想定しています。

account = [
    {
        firstName: '太郎',
        lastName: '山田',
    },
    {
        firstName: '花子',
        lastName: '佐藤',
    },
    {
        firstName: '一郎',
        lastName: '鈴木',
    }...
];

【困っている事】

setAccount({...account, doc.data()});

//エラー内容
型 '{ doc: firebase.firestore.QueryDocumentSnapshot<firebase.firestore.DocumentData>; "": any; length?: number | undefined; toString?: (() => string) | undefined; toLocaleString?: (() => string) | undefined; ... 30 more ...; [Symbol.unscopables]?: (() => { ...; }) | undefined; }' の引数を型 'SetStateAction<account | undefined>' のパラメーターに割り当てることはできません。
  オブジェクト リテラルは既知のプロパティのみ指定できます。'doc' は型 'account | ((prevState: account | undefined) => account | undefined)' に存在しません。ts(2345)

ここの箇所でエラーが発生してしまっています。
初心者なため随時調べて行っているのですが配列の中身がオブジェクトの値をstateに格納するやり方が
調べても中々見つからず、また型の宣言も合っているか心配です...。
もし分かる方がいらっしゃればご教授頂きたいです。
よろしくお願い致します。

Comments

[hoshi-takanori]

直接のエラーは、Firebase は doc.data() の型なんて知らないので、自分で型を検査するかキャストする必要があります。

その他、いくつか問題がありますね。
・レンダリングのたびに getAccountData を実行してますが、setAccount が呼ばれるたびにレンダリングされて getAccountData が呼ばれるので、無限ループになるはず。これを防ぐには useEffect を使います。
・getAccountData の中で await と .then() や .catch() を両方使う必要はないのでは。
・snapshot の各要素に対して setAccount するより、一回でまとめて setAccount する方が好ましいです。しかも、account の値はループ中には変わらないため、現在のコードだとたぶんおかしな値になるはず。

あと、これは余計なお世話だとは思いますが、型や関数コンポーネントの名前は先頭を大文字にする習慣があるので、account ではなく Account、list ではなく List の方が良いと思います。また、account という単数型の型名なのに配列になってるのは違和感があるので、たぶん Account 型は配列じゃない方が良い気がします。

[hiroki88]

ご回答して頂きありがとうございます!!
エラーの件かしこまりました、調べて行ってみたいと思います。

またその他についてもご指摘頂きましてありがとうございます!
・無限ループにならないようuseEffectを使用して実行したいと思います。
・確かにawaitとthen(),catch()の併用はおかしかったです、直します!
・そこに関しては自分もループして値をセットするより1回でセットできないか調べていたのですが良い記事が見つからず...もう一度調べたいと思います。
・自分一人で行う場合は命名規則が雑になりがちなので教えて頂いた事を徹底して書いていきたいと思います。大文字にする習慣がある事は知らなかったので教えて頂きありがとうございます。

本件と別の事まで確認して頂いてありがとうございました!!
大変勉強になります!!

[hoshi-takanori]

上に書いたのは回答ではなく、あくまでヒントです。自分で考えることが大事だと思ってるので。私の回答が欲しければ、そう言ってもらえたらいつでも答えます。

あと、もう一点。
・account の各項目には id があるはずなので、それも保持して、表示の際の key や、後で編集などする場合に利用すると良いでしょう。

[hiroki88]

頂いたヒントを元に調べて行い、ついにエラーを無くすことができました!
ご報告が出来ればと思います！
・本件のエラーであるfirebaseのdoc.data()の型付はキャストを行いDocumentData[]型だったものをTypeAliasのaccount[]型に変更しました。
・無限ループを避けるためにuseEffectを使用する予定でしたが描画前にgetAccountData関数を呼びだしたかったので今回はuseLayoutEffectを使用しようと思います。ただ調べるとなるべくuseLayoutEffectではなくuseEffectを使用した方が良いという事だったので悩んでおります。
・awaitとthen(),catch()の併用はおかしい箇所はawaitの使用のみでtry&catchでエラーは拾おうかと思います。
・setAccountにはスプレッド構文を使用し一回でまとめてセットできるようにしました。

[hoshi-takanori]

ご報告ありがとうございます。useLayoutEffect は描画の直前に何かしたい (たぶんアニメーションとか？) 場合に使うもので、普通に非同期処理を行うだけなら useEffect で充分でしょうね。

[hiroki88]

そうゆうことですね、useLayoutEffectとuseEffectの使い分けを意識していきたいと思います!
ヒントを頂きありがとうございました。
ベストアンサーにさせて頂きたいので回答の方に何かコメントを頂いてもよろしいでしょうか?

Answer 1

useStateの初期化がされていないと思います。
useState<account>([])

Comments

[hiroki88]

ご回答ありがとうございます!こちらも参考にして再度実装してみたいと思います!

[hiroki88]

無事エラーが解決できました!初期化できていないご指摘は反映させて頂きました!
ありがとうございます!

Answer 2

とりあえず、自分だったらこう書くかなってのを貼っておきます。

type Account = {
  id: string,
  lastName: string,
  firstName: string,
};

function AccountList() {
  const [account, setAccount] = useState<Account[]>([]);

  useEffect(() => {
    console.log('get...'); // デバッグ用

    const accountListTable = db.collection('accountList');
    accountListTable.get()
      .then((snapshot) => {
        console.log(`${snapshot.docs.length} accounts`); // デバッグ用

        const result: any[] = [];
        snapshot.forEach((doc) => {
          const account = {
            id: doc.id,
            lastName: doc.data().lastName ?? "",
            firstName: doc.data().firstName ?? "",
          };
          console.log(account); // デバッグ用
          result.push(account);
        });
        setAccount(result);

        // または、次の一行。
        // setAccount(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }) as Account));
      })
      .catch((e) => {
        console.log(e);
      });
  }, []);

  return (
    <>
      <ul>
        {account.map(each => <li key={each.id}>{each.lastName} {each.firstName}</li>)}
      </ul>
    </>
  );
}

Comments

[hiroki88]

ありがとうございます!!!