Nuxt.js+Firestoreでのデータの連続取得

Question

Nuxt.js+Firestoreでデータの連続取得

Nuxt.js、firestoreにてデータを取得し、さらに取得したデータを用いて新たなデータを参照したいです。
コレクション[user]には、ユーザー情報が入っており、各ユーザーIDに対応したドキュメント[userId0]にそのユーザーが参加しているチャットのchatIdが入っています。

コレクション[chat]には、chatIdごとにチャットの内容がコレクション[messages]の中のドキュメント[message0],[message1],...として入っています。

Firestoreの構造

*:collection
@:document

*user
-@useIid0
 -*chat
  -@chatId0
  -@chatId1
-@userId1
-@userId2

*chat
 -@chatId0
  -*messages
   -@message0
   -@message1
 -@chatId1

methodsに定義した関数

ユーザーに紐づいているチャットIDを取得

getChatIdList (userId) {
 const chatIdList = []
 const db = this.$fire.firestore.collection('user').doc(userId).collection('chat')
 db.get()
   .then((querySnapShot) => {
     querySnapShot.forEach((doc) => {
       chatIdList.push(doc.data())
     })
   })
 return chatIdList
}

得たチャットIDから、メッセージを取得

getChatMessages (chatId) {
 const messages = []
 const db = this.$fire.firestore.collection('chat').doc(chatId).collection('messages')
 db.get()
   .then((querySnapShot) => {
     querySnapShot.forEach((doc) => {
       messages.push(doc.data())
     })
   })
 return messages
}

createdの内容

上記の関数を使って、ユーザーが参加しているチャットのchatIdを取得し、処理が終わったら、chatIdを使って、そのチャットの内容をmessagesとして取得しようとしています。

created () {
  const self = this
  async function get() {
    const chatIdList = await self.getChatIdList()
　　　　　　　　const messagesList = []
    const messages = chatIdList.forEach(chatId => {
      messagesList.push(self.getChatMessages(chatId))
    })
  }
  get()
}

しかし、実際にはchatIdListが空のままforEachが回ってしまいます。
どのようにすればデータの取得後、そのデータを用いて次の処理を行えるでしょうか。

Answer 1

db.get()の処理をawaitにすることで解決できそうですがいかがでしょうか？
同様にchatMessageのほうもawaitにしたほうが良いと思います。

async getChatIdList (userId) {
 const chatIdList = []
 const db = this.$fire.firestore.collection('user').doc(userId).collection('chat')
 await db.get()
   .then((querySnapShot) => {
     querySnapShot.forEach((doc) => {
       chatIdList.push(doc.data())
     })
   })
 return chatIdList
}