[React + Firestore] Firestoreから値を指定してものを表示させたい

Question

要件

一覧ページから詳細ページにキーとなるdocIDを渡して
そのdocIDの内容のみ詳細ページで表示させたい。

できていること

if文の中では値が出ている（Firebase公式ページからコードコピー）

できていないこと

if文の外でデータが取り出せない、言い換えればjsx内で内容が表示できない

// import文省略

const ShopDetailScreen = (props) => {

    const docRef = db.collection('shops').doc(props.match.params.shopDocId);
// props.match.params.shopDocIdには一覧ページから渡ってきた物が入っています（確認済）

    docRef.get().then(function(doc) {
        if (doc.exists) {
            console.log(doc.data());
            // ここではコンソールに出てくる（下記）
        } else {
            console.log('No such document!');
        }
    }).catch(function(error) {
        console.log(error);
    });

// ここに書くとエラーになる
console.log(doc.data());

    return (
        <>
            ここにdoc.data()の中身を表示させたい
        </>
    );
}

export default ShopDetailScreen;

{shopimagepath: "https://firebasestorage.googleapis.com/v0/b/moblie…=media&token=xx, latitude: "34.694164", congestion: "1", createdAt: t, shopname: "三宮店", …}

（注）xxのところは非表示にさせていただきます

Answer 1

その書き方だとdoc.data()はdocRef.get().then中でしか参照できません。
useEffect、useState等を用いて、取得したデータをstate管理にしましょう。

// import文省略

const ShopDetailScreen = (props) => {

    const docRef = db.collection('shops').doc(props.match.params.shopDocId);
    const [data, setData] = useState(null);

    useEffect(() => {
        docRef.get().then(function(doc) {
        if (doc.exists) {
            setData(doc.data());
        } else {
            console.log('No such document!');
        }
        }).catch(function(error) {
            console.log(error);
        });
    }, []);

    if(!data) return null;

    return (
        <>
            {/* data表示処理 */}
        </>
    );
}

export default ShopDetailScreen;

Comments

[DaisukeMori]

下記コンソールが出ますね。

ちなみにdocRefをuseEffect内に入れてもできませんでした。

React Hook useEffect has a missing dependency: 'docRef'. Either include it or remove the dependency array react-hooks/exhaustive-deps

[DaisukeMori]

一応データは表示することができました。
ただやはり上記コンソールはきえませんね。
これはこのまま放っておいていいのでしょうか？

[DaisukeMori]

ES Lintエラーでこの現象がおこるようです。

以下のようにすればコンソールエラー消えましたので
共有しておきます。

```
useEffect(() => {
// useEffect内にdocRef格納
const docRef = db.collection('shops').doc(props.match.params.shopDocId);
docRef.get().then(function(doc) {
if (doc.exists) {
setData(doc.data());
} else {
console.log('No such document!');
}
}).catch(function(error) {
console.log(error);
});
}, [props.match.params.shopDocId]); // ここにpropsの値を入れる
```

[nekoniki]

共有ありがとうございます！
遭遇したことない事象だったのでたいへん参考になります！