TypeError: doc.data is not a functionと出る。

前提・実現したいこと

firestoreのコレクションから条件に合うドキュメントだけを取り出したい。

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

TypeError: doc.data is not a function

該当のソースコード

vuex
1state() {
2 myWallet: ''
3},
4
5getters: {
6    getMyWallet: state => state.myWallet.wallet,
7},
8
9mutations: {
10    getMyWallet(state, doc) {
11      state.myWallet = doc.data();
12    }
13},
14
15actions: {
16    async getMyWallet({ commit }) {
17      firebase.auth().onAuthStateChanged(user => {
18        const uid = user.email;
19        const db = firebase.firestore();
20        const doc = db
21          .collection('myData')
22          .where('uid', '==', uid)
23          .get()
24        commit('getMyWallet', doc);
25      });
26    },
27}

.where('uid', '==', uid)のuidには新規登録時のメールアドレスを値としてfirestoreに格納してあります。

試したこと

.collection('myData')
          .doc('特定のドキュメントID')
          .get()
        commit('getMyWallet', doc);

###追記
新規登録の時に自分のuidをデータベースに保存するようにしました。

vue
1methods: {
2    async signUp() {
3      await this.$store.dispatch('signUp', { username:this.username, email:this.email, password:this.password });
4      const db = firebase.firestore();
5      const user = firebase.auth().currentUser;
6        db.collection('myData').doc(user.uid).set({
7          uid: user.uid,
8          userName: user.displayName,
9          email: user.email,
10          myWallet: 300
11        });
12      this.$store.dispatch('getMyWallet', user.uid);
13      this.$router.push('/home');
14    }
15  }

vuex
1state() {
2    myWallet: '',
3},
4getters: {
5    getMyWallet: state => state.myWallet.myWallet,
6},
7mutations: {
8    getMyWallet(state, doc) {
9      state.myWallet = doc.data();
10      console.log(doc.data())
11    }
12},
13actions: {
14    async getMyWallet({ commit }, uid) {
15      const db = firebase.firestore();
16      const doc = await db
17        .collection('myData')
18        .doc(uid)
19        .get();
20      commit('getMyWallet', doc);
21    }
22}

上記の通りコードを変更したところ新規登録してホーム画面に遷移した際に自分の残高が表示されるようになったのですが、一つだけ問題が起きました。

例えば、一度ログアウトして'myWallet: 300'を仮に1000円にして再度新規登録をした時に前の300円が表示されてしまいます。
そして、firestoreとコンソールで確認したところどちらも300円で登録されていました。
このような挙動になるのが何故なのかわからないです。

whereを使わずに特定のドキュメントIDを指定すると該当するドキュメントを取得することはできるのですが、where句にするとエラーメッセージが出てしまいます。

原因がわからない状況でございます。

ご教授いただけると幸いです????‍♂️

hoshi-takanori

2021/02/26 07:08

メールアドレスを uid にするのはあまり良くないというか、Firebase Auth でサインアップ時に uid (ランダムな文字列) が割り振られるので、普通はそれを使いますよね…。で、uid が分かってるなら db.collection('myData').doc(uid).get() とかでそのユーザーの情報が取れるはず。

F_Yohei

2021/02/26 07:13

回答いただきありがとうございます。サインアップ時に割り振られるuidを使用することは存じ上げております（修正せず質問してしまいました）今回解決したいのはwhere句を使用した時に、なぜ"doc.data() is not a function"というようなエラーが出るのか？という部分です????‍♂️

hoshi-takanori

2021/02/26 07:24

・ドキュメント ID はフィールドではないので where の条件にはならないはず。　(ID をフィールドにもセットすればできるかもだけど、そんなことをする利点はあまりないと思います…。) ・また、get() は非同期なので、await か then とかが必要では。

F_Yohei

2021/02/27 01:54

whereを使わずに実装してみました。ただ、新たな問題が発生してしまいました。そのことについて追記したのでご教授いただければ幸いです????‍♂️