Firebase v9 の Firestoreのdocument data参照方法

Question

Firebase v9 の Firestoreのdocument data参照方法

Nuxt.jsでFirebaseを用いてbooklistアプリを作ろうと思っており、ひとまずFirestoreに保存するまではできました。
以下がその内容です。

document dataが参照できない

dataを保存できたのはいいですが、出力ができません。調べた所、firebaseのバージョンv8はたくさん記事があるのですがv９の記事が少なく難航しています。
以下が私の作ったコードです。

<script>
import { getFirestore, collection, addDoc ,getDocs} from 'firebase/firestore'

export default {
  data() {
    return {
      name: 'xxx',
    }
  },
  methods: {
    addTask() {
      const db = getFirestore()
      addDoc(collection(db, 'bookList'), {
        name: this.name,
      })
    },
    ddd() {
      const db = getFirestore();
      const colRef = collection(db, 'bookList');
      const docRef = getDocs(colRef, 'bookList');
      console.log(docRef);
    },
  },
}
</script>

collectionに”booklist”、documentにランダムid、dataに”name:xxx”です。
以下が出力結果です。

私の期待する出力は"xxx"なのですが。。。。
どなたか助言をお願いします。

環境

"firebase": "^9.8.1",
"nuxt.js": "^2.15.8",
"node.js":"v14.17.6"

Answer 1

リファレンスを読み直しました。正しくは下記でした。

<script>
    async addGet() {
      const db = getFirestore()
      const querySnapshot = await getDocs(collection(db, 'bookList'))
      querySnapshot.forEach((doc) => {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.data())
      })
    },

</script>