Vue3中如何在Firebase 9里切换Boolean字段isFav的值

你遇到的Uncaught ReferenceError: isFav is not defined错误，是因为toggleFav函数里的!isFav没有对应变量——你没获取到当前书籍的isFav状态就直接取反了。以下是两种可行的解决方法：

方法一：直接利用Vue循环中的book对象（简单快捷） #

模板里把整个book对象传给点击事件，而不是只传id：

<span class="material-icons fav_ico" @click="toggleFav(book)">
  favorite
</span>

修改toggleFav函数，直接使用book对象的isFav值取反：

function toggleFav(book) {
  const updatedData = {
    isFav: !book.isFav
  };

  const docRef = doc(db, "books", book.id);
  setDoc(docRef, updatedData, { merge: true });
}

这种方式不需要额外请求Firestore，直接用客户端已加载的book数据完成切换，适合数据同步性要求不高的场景。

方法二：先读取Firestore文档最新值再更新（避免并发冲突） #

如果担心客户端数据和服务器数据不一致（比如多人同时修改同一本书），可以先拉取服务器端的最新isFav值再更新：
首先新增导入getDoc和updateDoc：

import { doc, deleteDoc, setDoc, getDoc, updateDoc } from "firebase/firestore";

然后修改toggleFav函数：

function toggleFav(bookid) {
  const docRef = doc(db, "books", bookid);

  getDoc(docRef)
    .then(docSnap => {
      if (docSnap.exists()) {
        const currentIsFav = docSnap.data().isFav;
        // 用updateDoc只更新isFav字段，更高效
        updateDoc(docRef, {
          isFav: !currentIsFav
        });
      }
    })
    .catch(err => console.error("切换收藏状态失败:", err));
}

这里用updateDoc替代setDoc更合适，它只会修改指定字段，不会意外覆盖其他数据。

额外优化：根据isFav状态切换图标 #

可以让图标直观反映收藏状态，修改模板：

<span 
  class="material-icons fav_ico" 
  :class="{ 'active': book.isFav }"
  @click="toggleFav(book)"
>
  {{ book.isFav ? 'favorite' : 'favorite_border' }}
</span>

添加CSS样式：

.fav_ico.active {
  color: #f44336;
}

内容的提问来源于stack exchange，提问作者IndabCoding