要件(課題)

classコンポーネントで書いたコードを「React Hooks」を導入するために
functionコンポーネントにして改修しているのですが
useEffectsで外部データを展開するところでどうしてもうまくデータが取り出せません。

前提

React
Firestore(Firebaseデータベース)

使いたい技術

React Hooks機能(useState, useEffect)
当然functionコンポーネントで記述

まずこちらが改修前のclassコンポーネント

firestoreからデータをとってきて表示（当然問題なく表示）

js
1import React from 'react';
2import { Link } from 'react-router-dom';
3import { db } from '../../Firebase';
4
5class Index extends React.Component {
6
7    state = {
8        list: [],
9    }
10    
11    //データ取得
12    getUsers = async () => {
13        const colRef = db.collection('users')
14            .orderBy('createdAt', 'desc')
15            .limit(10);
16        const dates = await colRef.get();
17        const docs = dates.docs.map(doc => doc.data());
18        await this.setState({
19            list: docs,
20        });
21    }
22
23    //更新時のcalback
24    onCollectionUpdate = () => {
25        this.getUsers();
26    }
27
28    componentDidMount = async () => {
29        await this.getUsers();
30        this.unsubscribe = db.collection('users').onSnapshot(this.onCollectionUpdate);
31    }
32
33    render() {
34        return (
35            <React.Fragment>
36                <section>
37                    <h2>一覧表示</h2>
38                    {this.state.list.map(item => (
39                        <div key={item.docId + String(new Date())}>
40                            <div>{item.name}</div>
41                            <div>{item.email}</div>
42                            <div><Link to={`/users/Detail/${item.docId}`}>詳細</Link></div>
43                        </div>
44                    ))}
45                </section>
46            </React.Fragment>
47        );
48    }
49}
50
51export default Index;

改修中コード(やったこと)

js
1import React, { useState, useEffect } from 'react';
2import { Link } from 'react-router-dom';
3import { db } from '../../Firebase';
4
5const Index = () => {
6    const [list, setList] = useState([]);
7
8    useEffect(() => {
9        const colRef = db.collection('users')
10            .orderBy('createdAt', 'desc')
11            .limit(10);
12        const dates = colRef.get();
13        console.log(dates);
14        // コンソールログ結果: ▶︎Promise {<pending>}
15        // ここまではエラーなし
16
17        // [error]mapで出力できるかやってみたらエラーで返される
18        const docs = dates.docs.map(doc => doc.data());
19    });
20
21    return (
22        <React.Fragment>
23            <section>
24                <h2>一覧表示</h2>
25                Viewは一旦取り外し
26            </section>
27        </React.Fragment>
28    );
29}
30
31export default Index;

エラーコンソール画像

cf.
一応functionコンポーネントでも
import { useCollectionData } from "react-firebase-hooks/firestore";
これを使ったらシンプルにコード書くことはできました。

js
1import React from 'react';
2import { Link } from 'react-router-dom';
3import { db } from '../../Firebase';
4import { useCollectionData } from "react-firebase-hooks/firestore";
5
6// functionコンポーネント
7const Index = () => {
8    const [ list, loading, error ] = useCollectionData(
9        db.collection('users'),
10        { idField: 'docId' }
11    );
12    if (loading) return <div>Loading...</div>;
13    if (error) return <div>Error...</div>;
14
15    return (
16        <React.Fragment>
17            <section>
18                <h2>一覧表示</h2>
19                {list.map(item => (
20                    <div key={item.docId + String(new Date())}>
21                        <div>{item.name}</div>
22                        <div>{item.email}</div>
23                        <div><Link to={`/users/Detail/${item.docId}`}>詳細</Link></div>
24                    </div>
25                ))}
26            </section>
27        </React.Fragment>
28    );
29}
30
31export default Index;