从 firebase (Vue) 获取一份文档

Question

我正在尝试根据我使用自动生成的 firebase ID 检索文档的路由参数 (id) 从 firebase 获取特定文档。

但是，没有返回任何数据。

使用 when() 方法，我想检索一个具有与我的查询匹配的自动生成 ID 的特定文档...我正在使用 ("id", "==", $this.route. params.id)... 在引用自动生成的 ID 时，“id”是正确的语法吗？

稍后我将操作 UI，现在，我只是在模板中添加了这个...

<template>
 <div>
  <h1>{{ huddle.goal }}</h1>
  <h1>{{ huddle.headline }}</h1>
  <h1>{{ huddle.body }}</h1>
 </div>
</template>

然后我的脚本中有这个...

<script>
import db from "./firebaseInit"
export default {
  name: "HuddleSpace",
  data() {
    return {
      id: this.$route.params,
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    "$route": "fetchData"
  },
  methods: {  
    fetchData() {
      db.collection("huddle").where("id", "==", 
       this.$route.params.id).get().then(querySnapshot => {
        querySnapshot.forEach(doc => {
         const huddle = {
            goal: doc.data().goal,
            headline: doc.data().headline,
            body: doc.data().body
          }
        })
      })
    }
  },
}
</script>

我将不再使用 Vue Router 文档“导航后获取数据”/用于获取数据的 firebase 文档/youtube 上的一些视频，所以我不确定逻辑是否合理。

Answer 1

您无需进行查询， 您处理的 id 是文档 id，所以要使用它 =>

db.collection('huddle').doc(this.$route.params.id)
.get().then(snapshot => {
    if (!snapshot.exists) return;
    let data = snapshot.data() // 
    // continue your code
});

// where("id", "==", this.$route.params.id) =>这会进行查询以获取具有指定值的字段名称（id）的文档（$this.route.参数.id)

Answer 2

您的问题来自您的huddle 对象未包含在data 对象中，因此它未添加到“Vue 的反应系统”中。详情请参阅https://vuejs.org/v2/guide/instance.html#Data-and-Methods。

你应该这样做：

<script>
import db from "./firebaseInit"
export default {
  name: "HuddleSpace",
  data() {
    return {
      id: this.$route.params.id,
      huddle: {}
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    "$route": "fetchData"
  },
  methods: {  
    fetchData() {
      db.collection("huddle").where("id", "==", 
       this.$route.params.id).get().then(querySnapshot => {
        querySnapshot.forEach(doc => {
         this.huddle = {
            goal: doc.data().goal,
            headline: doc.data().headline,
            body: doc.data().body
          }
        })
      })
    }
  },
}
</script>