nuxtでうまくハッシュに値を入れられない

下記のコードでuserコレクションのphotoUrlが取れません。。。エラーも特に出ません。

userコレクション>uid>photoUrl

でfirestoreから値を取得しようと思っています。

  created() {
    this.room_id = this.$route.params.id
    const db = firebase.firestore()
    db.collection('room').doc(this.room_id).collection('message').onSnapshot(querySnapshot => {
      querySnapshot.docChanges().forEach(doc => {
        this.messages.push({
          ...doc.doc.data(),
          id: doc.doc.id,
          user_icon: db.collection("user").doc("uid").get().photoUrl
        })
      })
    })
  },

行動規範の内容に同意します

回答1件

ベストアンサー

js
1querySnapshot.docChanges().forEach(doc => {
2//...
3  user_icon: db.collection("user").doc("uid").get().photoUrl

forEachのループの中で、非同期でデータを取りに行っているような処理なので、この部分がよくないのではないでしょうか。

この箇所ですが、db.collection("user").doc("uid") で user コレクションの document ID が uid な DocumentReference を取得しています。
それに対して get メソッドを呼んでいるので、返り値は Promise<DocumentSnapshot> になると思います。photoUrlというプロパティもないと思うのでundefinedになりそうですね。
Promiseであるため、 await なり then() なりで DocumentSnapshot を受け取る必要があると思いますが、 forEach の中でやるにはあまり向いていないので可能であれば事前に取得しておくなどできると良さそうです。