Vue-firestore方法内调用firestore()获取单条数据失败求助

我来帮你搞定这个问题！你遇到的情况是因为firestore()是Vue实例的初始化选项，用来提前绑定集合或固定文档的，没法直接在方法里用它来动态获取单条记录。下面给你两种可行的方案：

方案1：直接用Firebase SDK获取单条记录（一次性获取） #

如果不需要实时同步数据，直接用Firebase原生的doc().get()方法就行，记得处理异步操作：

new Vue({
  el: '#app',
  data() {
    return {
      page: null // 用来存储单条记录的数据
    }
  },
  firestore() {
    return {
      pages: db.collection('pages') // 集合绑定正常保留
    }
  },
  methods: {
    async showPage(id) {
      console.log("Getting content for: " + id);
      try {
        // 获取指定ID的文档引用
        const docRef = db.collection('pages').doc(id);
        // 异步获取文档快照
        const docSnapshot = await docRef.get();
        
        if (docSnapshot.exists) {
          // 把文档数据赋值给data里的page
          this.page = docSnapshot.data();
          console.log("成功获取页面数据:", this.page);
        } else {
          console.log("找不到对应的页面记录！");
        }
      } catch (error) {
        console.error("获取记录时出错:", error);
      }
    }
  }
})

方案2：用Vue-Firestore的$bind方法实现实时同步 #

如果希望单条记录也能像集合那样实时更新（比如后台修改数据后前端自动刷新），可以用vue-firestore提供的$bind方法手动绑定文档：

new Vue({
  el: '#app',
  data() {
    return {
      page: null
    }
  },
  firestore() {
    return {
      pages: db.collection('pages')
    }
  },
  methods: {
    showPage(id) {
      console.log("Getting content for: " + id);
      // 绑定指定ID的文档到this.page，支持实时同步
      this.$bind('page', db.collection('pages').doc(id))
        .then(() => {
          console.log("页面记录绑定成功，数据将实时同步:", this.page);
        })
        .catch(error => {
          console.error("绑定页面记录时出错:", error);
        });
    }
  }
})

简单总结下：firestore()选项是初始化时用的静态绑定，动态获取单条记录要么用原生SDK的异步获取，要么用$bind做动态的实时绑定，这两种方式都能解决你的问题。

内容的提问来源于stack exchange，提问作者James A Mohler