Question

努力从 useDocument 获取数据以使用 vue.js 和 Firestore 显示

2022-12-25

1040

javascript vue.js google-cloud-firestore vuefire

我试图从 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', 但是当它到达模板时出现错误

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')

Answer 1

如果有人发现这一点，因为他们需要异步获取来自 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 不起作用。在我看来，这需要在文档中更清楚地说明。

Answer 2

也许可以试试这个。

...
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 属性显示一次该位置它已加载。

您还可以在此处阅读有关订阅状态的内容，其中讨论了解构。 https://v3.vuefire.vuejs.org/guide/realtime-data.html#subscription-state