努力從 useDocument 獲取數據以顯示 vue.js 和 Firestore

Question

我正在嘗試從 Firestore 獲取一條記錄以顯示在 Vue.js 中。我正在使用 VueFire 和此處的指南。

<script setup>    
import { initializeApp } from 'firebase/app'
import { getFirestore , doc } from "firebase/firestore"; 
import { useDocument } from 'vuefire'

const firebaseConfig = {...};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const db = getFirestore(firebaseApp);

const place  = useDocument(doc(db, "data", "key"));
console.log(place)
</script>

<template>
  {{ place.title }}
</template>

記錄的數據是RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: {title: 'I am a title',但是到了模板的時候就報錯了

未捕獲（承諾）TypeError：無法讀取未定義的屬性（讀取“標題”）

Answer 1

也許試試這個。

...
const { data: place, pending } = useDocument(doc(db, "data", "key"));
</script>

<template>
  <h1>Place</h1>
  <template v-if="!pending">{{ place.title }}</template>
</template>

我只是在關注 VueFire 的作者在這里發布的內容： https://github.com/vuejs/vuefire/blob/df3c235f226d4e4c821391bcce74a1c3a6134406/packages/nuxt/playground/pages/firestore-useDocument.vue

您可以使用pending屬性在加載后顯示該位置。

您還可以在此處閱讀有關訂閱 State 的內容，他們在其中討論了解構。 https://v3.vuefire.vuejs.org/guide/realtime-data.html#subscription-state

Answer 2

如果有人因為需要useDocument()的異步數據而發現此問題，您可以根據上面 Kyle 的建議（vueFire 作者的 Github 帖子）做類似的事情：

const { data: place, promise } = useDocument(doc(db, 'data', 'key'))
promise.value.then((place) => {
  // do something with place like console.table(place)
})

即使不想監聽變化，還是要用“訂閱”的方式異步獲取數據。 async/await不起作用。 這需要在文檔恕我直言中更加清楚。