Firebase onSnapshot 监听器：如果文档还不存在，如何处理？答案

【问题标题】：Firebase onSnapshot listener: How to handle if doc does not exist yet?Firebase onSnapshot 监听器：如果文档还不存在，如何处理？
【发布时间】：2022-01-14 11:57:28
【问题描述】：

我正在构建一个应用程序，用户可以在其中标记他们感兴趣的主题。

我正在寻找有关如何处理以下问题的最佳做法：

我有一个在页面创建期间安装 onSnapshot 侦听器的页面（示例页面路径：site.com/tags/apple）。此页面允许用户将标签实际添加到他们的提要中。首先，我需要“观察”他们是否将标签添加到他们的提要中，或者检查它是否已经存在，这样我就可以切换按钮图标的状态，让他们知道他们已经将此标签添加到他们的提要中.

我想我会使用onSnapshot 侦听器来处理这个逻辑（针对这个问题进行了简化）：

mounted() {

    loadwatchedTag() {
      const docRef = doc(db, `users/${this.userProfile.uid}/tags`, 'apple') //<-- example tag

      this.unsubscribe = onSnapshot(docRef, {
        next: (doc) => console.log('tag', doc.data()),
        error: (error) =>
          console.log('watchedTag listener error', error)
      })
    }

}

问题是在页面加载时，我在控制台中收到以下错误（因为该标签尚不存在）：

tag, undefined

那么，如果标签尚不存在，如何在页面加载时处理此问题？我应该在 onSnapshot 代码中做这样的事情吗？

if (docSnap.exists()) {
  console.log("tag exists!", docSnap.data());
} else {
  // doc.data() will be undefined in this case
  console.log("tag does not exist");
}

【问题讨论】：

所以，如果doc.data() 是undefined 你可以使用doc.data() == undefined

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

我应该在onSnapshot 代码中做这样的事情吗？

if (docSnap.exists()) {
   console.log("tag exists!", docSnap.data());
} else {   
   // doc.data() will be undefined in this case  
   console.log("tag does not exist"); 
}

是的，这正是您应该做的。在doc 中针对getDoc() 方法有一个专门针对这种情况的“注释”：

注意：如果docRef引用的位置没有文档，生成的文档将为空，并在其上调用 exists 返回 false。

【讨论】：

谢谢！我会研究并回复你。