[React] リストをmapした時、エラーになる

Question

環境

React(create react app)
Firebase
表示使っているモジュール
import { useCollectionData } from 'react-firebase-hooks/firestore';

問題

firestore(firebaseクラウドデータベース)の記事をReactで表示させたいのですが、
TypeError: Cannot read property 'map' of undefinedというエラーが出てうまく表示できません。

不明な現象

一度、mapしている部分をコメントアウトしてから、コメントアウト外すと表示されます。
しかし自分でリロードかけると同じエラーになってしまいます。

この現象はどうすれば解消できるのでしょうか？
詳しい方ご教示お願いします。

import { useState } from 'react';
import firebase, { storage, db } from '../../Firebase';
import { useForm } from 'react-hook-form';
import { useCollectionData } from 'react-firebase-hooks/firestore';

const Upload = () => {
    const { register, handleSubmit, errors } = useForm();
    const user = firebase.auth().currentUser;
    let authId;
    let email;
    let name;
    let photoURL;

    if (user != null) {
        user.providerData.forEach(() => {
            authId = user.uid;
            email = user.email;
            name = user.displayName;
            photoURL = user.photoURL;
        });
    }
    
    // Render
    const [ list ] = useCollectionData(db.collection('posts').orderBy('createdAt', 'desc'), { idField: 'docId' });
    console.log(list);

    return (
        <>        
            {list.map(item => (
                <div key={item.docId + String(new Date())}>
                {authId === item.authId ? (
                    <>
                        {item.name ? (
                            <div>{item.name}</div>
                        ) : (
                            <div>ゲストユーザー</div>
                        )}
                        <div>
                            <div>{item.msg}</div>
                        </div>
                        {item.photoURL ? (
                            <img src={ item.photoURL } alt="User" />
                        ) : (
                            <div>no image</div>
                        )}
                    </>
                ) : (
                    <>
                        <div>
                            {item.photoURL ? (
                                <img src={ item.photoURL } alt="User" />
                            ) : (
                                <div>no image</div>
                            )}
                            <div>
                                {item.name ? (
                                    <div>{item.name}</div>
                                ) : (
                                    <div>ゲストユーザー</div>
                                )}
                                <div>
                                    <div>{item.msg}</div>
                                </div>
                            </div>
                        </div>
                    </>
                )}
                </div>
            ))}
        </>
    );
}

export default Upload;

Answer 1

困ったときはドキュメントを読みに行きましょう。
react-firebase-hooks/firestore at 1e893b11a41df8618a80ac7964bdf02dcf05735e · CSFrequency/react-firebase-hooks

const [values, loading, error] = useCollectionData < T > (query, options);

<T> がついてますが TypeScript のジェネリクスなので JavaScript の場合は気にしなくて良いです。で、戻り値が三つありますね？ちゃんと三つで受け取りましょう。そして loading という変数があることから察することができるかもしれませんが values はまだ読み込まれていない可能性があるのです。ですので loading を監視して、または values に 中身が入っているか確認をした上で map を始める必要があります。

あと話それるんですが三項演算子の多用は可読性を著しく下げるのですぐに別のコンポーネントに切り出すようにして三項演算子の仕様をやめましょう。そしてその別コンポーネントの中で事前の変数準備だけで条件付きレンダリングを回避できないか考えましょう。