我正在开发一个应用程序，用户可以在其中标记他们感兴趣的主题。
我正在寻找有关如何处理以下问题的最佳实践：
我有一个在页面创建期间装载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");
}