firebase(v9)の公式ドキュメントに載っているgetDocの実装例を参考に実装すると エラー([exists is not a function])が発生。解消方法を知りたい。

Question

前提・実現したいこと

React(Redux)+firebaseの認証機能を使ってログイン処理を行った後に
画面上にサインイン情報を表示させようとしています。

下記動画を参考にしながら学習しているところです。
https://www.youtube.com/watch?v=PNvLGoop8z8&t=2340s

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

firebaseのv9でドキュメント情報を取得する処理を実装していたのですが、
データが取得できず下記エラーが出てしまいます。
「Uncaught (in promise) TypeError: snapshot.exists is not a function at operations.js:29:1」

該当コードは以下になります。

import {signInAction} from './actions';
import {push} from 'connected-react-router';
import {auth, db} from '../../firebase/index'
import { doc,getDoc } from 'firebase/firestore';
import {
    signInWithEmailAndPassword
} from 'firebase/auth'

export const signIn = (email,password) => {
    return async (dispatch) => {
        // Validation
        if (email === "" || password === "") {
            alert("必須項目が未入力です")
            return false
        }

        signInWithEmailAndPassword(auth,email,password)
            .then(result => {
                const user = result.user

                if(user) {
                    const uid = user.uid
                    console.log("uid:",uid)

                    const docRef = doc(db,"users",uid)
                    const snapshot = getDoc(docRef)
                    
                    if (snapshot.exists()) {
                        console.log("snapshot:",snapshot);
                        const data = snapshot.data()
                        dispatch(signInAction({
                            isSignedIn: true,
                            role: data.role,
                            uid: uid,
                            username: data.username
                        }))
                    } else {
                        console.log("No Such document!:");
                    }
                    
                    dispatch(push('/'))
                }
            })
    }
}

firebaseの公式ドキュメントも参考にしながら実装していたのですが、
エラーの解消方法がわからず困っているところです・・・。
https://firebase.google.com/docs/firestore/query-data/get-data?hl=ja#get_a_document

試したこと

[確認1]
上記コードの中でuidを出力する処理を入れて、問題なく取れていることは確認できています。

[確認2]
snapshot変数の中身を確認してみましたが、コンソール出力をしてみた限りでは存在しているように見えます。

[確認3]
下記の記事を参考にgetDoc関数の処理後に[.then]を付けて実装してみたところ、ドキュメント情報を取得できた。
https://reffect.co.jp/react/react-crud-firebase-9

getDoc(docRef).then((snapshot) => {
    console.log(snapshot.exists())
    console.log(snapshot.data())
})

[確認4]
改めて公式ドキュメントを参考として愚直にgetDocの前にawaitを付けてみたが、別のエラーが出てしまう(awaitの使い方に問題がありそう？)。
「Parsing error: Unexpected reserved word 'await'」
signInWithEmailAndPassword(XXX).then(result => {...})という実装のところで[result]の前に[async]を付けると上記エラーが解消されて、求めている処理結果になった。

補足情報（FW/ツールのバージョンなど）

firebase:9.6.6
React:17.0.2
React-redux:7.2.6
npm:8.1.0

Comments

[mike2mike4]

snapshot変数取れてますか？

[yuki_20211108]

snapshot変数の中身を確認してみましたが、コンソール出力を実施してみた限りでは取れているようには見えます・・・。

[mike2mike4]

ｖ9で変わってるのかなと思ったのですがよくわからず。
https://reffect.co.jp/react/react-crud-firebase-9
のように.thenをつかってみては

[mike2mike4]

あとは、
import { doc,getDoc } from 'firebase/firestore';
を
import { doc,getDoc } from 'firebase/compat/firestore';
にしてみるとか

[hoshi-takanori]

getDoc は非同期関数のようなので、await する必要があるのでは…。

Answer 1

mike2mike4さん、hoshi-takanoriさんのサポートにより無事求めている処理結果を出すことができました。完全には理解できていませんが、連携してくださった情報を整理すると主に2パターンの実装方法があるようです。

.then/async&awaitの使い方も理解しながら学習を進めていきたいと思います。
独力では解決方法がわからず困っていたところなので、とても助かりました！
ありがとうございましたm(_ _)m!

<求めていた処理結果(ブラウザ)>

<実現方法>

signInWithEmailAndPassword(auth,email,password)
            .then(result => {
                const user = result.user

                if(user) {
                    const uid = user.uid
                    const docRef = doc(db,"users",uid)

                    getDoc(docRef).then((snapshot) => {
                        if (snapshot.exists()) {
                            const data = snapshot.data()
                            dispatch(signInAction({
                                isSignedIn: true,
                                role: data.role,
                                uid: uid,
                                username: data.username
                            }))
                        } else {
                            console.log("No Such document!:");
                        }    
                    })
                    
                    dispatch(push('/'))
                }
            })

signInWithEmailAndPassword(auth,email,password)
            .then(async (result) => {
                const user = result.user

                if(user) {
                    const uid = user.uid
                    const docRef = doc(db,"users",uid)
                    const snapshot = await getDoc(docRef)
                    
                    if (snapshot.exists()) {
                        const data = snapshot.data()
                        dispatch(signInAction({
                            isSignedIn: true,
                            role: data.role,
                            uid: uid,
                            username: data.username
                        }))
                    } else {
                        console.log("No Such document!:");
                    }
                    
                    dispatch(push('/'))
                }
            })