ドキュメントの内容をmapで取得したい。

Question

前提・実現したいこと

firebaseからドキュメントを取得し、mapで回し画面に表示したいと考えています。
実行時に以下のエラーが出ます。

発生している問題・エラーメッセージ

Error: Objects are not valid as a React child (found: object with keys {image, buisinessId, uid, email, areaId, name, updated_at, created_at}). If you meant to render a collection of children, use an array instead.

該当のソースコード

//api.js
const db = getFirestore();

export const initGetUserList = async () => {
  let users = [];
  const user = await query(collection(db, "users"));
  await getDocs(user).then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      users.push({
        name: doc.data(),
        email: doc.data(),
        areaId: doc.data(),
        buisinessId: doc.data(),
      });
    });
  });
  return users;
};

//userList.js

const [users, setUsers] = useState([]);
  let data = [];

  useEffect(() => {
    fetch();
    /* eslint-disable */
  }, []);

  const fetch = async () => {
    data = await initGetUserList();
    await console.log(data);　⇐ここまでは取得できている
    await setUsers(data);
  };

  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography
          className={classes.title}
          color="textSecondary"
          gutterBottom
          variant="h5"
        >
          User List
        </Typography>
        <ui>
          {users.map((user, i) => (
            <li key={i}>
              {user[name]} {user[email]} {user[areaId]} {user[buisinessId]}
            </li>
          ))}
        </ui>
      </CardContent>
    </Card>
  );

試したこと

useStateでusersが取得できていないので、それが原因かと考えられますが、
どのように取得してきたらよいのかわからない状態です。

補足情報

await console.log(data);で取得できている配列は以下です。
0: {name: {…}, email: {…}, areaId: {…}, buisinessId: {…}}
1: {name: {…}, email: {…}, areaId: {…}, buisinessId: {…}}
length: 2

Answer 1

出力エラーで検索していただければ似たような事象は出てくると思います。
一度検索してみて下さい。

React要素以外のオブジェクトはレンダリングすることができません。
users.map((user)=> で取り出したuserは{name: {…}, email: {…}, areaId: {…}, buisinessId: {…}}というオブジェクトなのでこれをレンダリングしようとするとエラーになります。

全てをString型として出力するならJSON.stringify(user)やJSON.stringify(user[name])でString型としてレンダリングします。
{…}部分の構造はわかりませんがそれぞれを個別で出力するならObject.entries(user).map(element => {出力処理})等になります。

後者の方法でも出力内容がまだプリミティブ型(非オブジェクト)ではない場合は、またJSON.stringifyやオブジェクトの変形が必要になります。

余談

await setUsers(data);

stateのsetterにawaitは必要ありません。

useStateでusersが取得できていないので、それが原因かと考えられますが、

何を持ってusersが取得できていないと判断したのかがわかりません。

Comments

[tttniaeefe]

回答ありがとうございます。
無事取得することができました。