Firesotreでサブコレクションを取得したいが、forEach is not a functionとエラーが出る

Question

前提

Vue3とFirestoreでサブコレクションの「classes」を取得したいです。
公式ドキュメントと同じように記載したのですが、

Uncaught (in promise) TypeError: eventClass.forEach is not a function

というエラーが出てしまい取得できません。

実現したいこと

• eventsコレクション内のclassesコレクションのデータをすべて取得したい

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

Uncaught (in promise) TypeError: eventClass.forEach is not a function

該当のソースコード

<template>
<!--省略-->
</template>

<script>
import db from "../firebase.js";
import { collection, getDocs} from "firebase/firestore";
export default {
  mounted: function () {
        //クラスデータ取得
        const eventClass = getDocs(collection(db, 'events', this.$route.params.id, 'classes'))
        eventClass.forEach((doc) => {
            console.log(doc.data())
        })
  },
};
</script>

試したこと

同じような現象が発生した方で下記を参照したのですが、それでも解決しません。
https://teratail.com/questions/216932
https://teratail.com/questions/260393

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

• vue 3.2.25
• firebase 9.6.11

Answer 1

getDocs() は Promise を返すので、async / await を使ってみてはいかがでしょうか。

https://firebase.google.com/docs/firestore/query-data/get-data#get_all_documents_in_a_collection

export default {
  mounted: async function () {
        //クラスデータ取得
        const eventClass = await getDocs(collection(db, 'events', this.$route.params.id, 'classes'))
        eventClass.forEach((doc) => {
            console.log(doc.data())
        })
  },
};

Comments

[akarisano]

qnoir様
迅速なアドバイスありがとうございます。
記載いただいた通り、async/awaitで無事に取得することができました。
公式ドキュメントにはawaitしか書いておらず、ミスだろうと思って飛ばしていました。