如何实现点击同一按钮切换Firebase数据库数据增删操作

你遇到的添加后立刻被删除的异常，来自两个核心逻辑错误：

• 你把Firebase实时数据监听的逻辑写在了按钮点击回调内部，每次点击都会注册一个新的监听器
• 你没有提前同步当前ID在数据库中的存在状态，同一次点击流程中执行添加操作后，数据变更会立刻被刚注册的监听器捕获，自动触发删除逻辑，相当于单次点击直接走完了「添加-删除」全流程

核心原则：不在点击事件内部注册数据监听，提前同步并维护本地状态，点击时仅根据当前确定的状态执行单方向操作，操作成功后再更新本地状态和按钮UI

实现步骤 #

• 组件/页面初始化阶段，先查询目标Firebase ID在数据库中是否存在，将结果存在本地状态变量isIdSaved中，初始值设为null（代表状态未加载完成），查询完成后赋值为布尔值：true代表ID已存在、false代表ID不存在
• 给按钮绑定点击事件时先做拦截：如果isIdSaved为null（状态还未从数据库拉取完成），直接终止逻辑不执行操作，避免状态不准导致误操作
• 点击触发后根据当前isIdSaved的值走单分支逻辑：
  • 若当前值为false：执行数据库添加ID的操作，操作成功后再将isIdSaved更新为true，同步切换按钮为已添加的样式（比如实心收藏图标）
  • 若当前值为true：执行数据库删除对应ID的操作，操作成功后再将isIdSaved更新为false，同步切换按钮为未添加的样式（比如空心收藏图标）

参考实现代码 #

// 本地状态存储
let isIdSaved = null;
// 替换为你实际要操作的Firebase文档ID
const targetDocId = "your_firebase_doc_id";
const actionBtn = document.querySelector("#toggle_action_btn");

// 初始化时拉取当前ID的存在状态
async function initDocStatus() {
  const docSnapshot = await db.collection("your_target_collection").doc(targetDocId).get();
  isIdSaved = docSnapshot.exists;
  // 此处可初始化按钮样式
}
initDocStatus();

// 绑定按钮点击事件
actionBtn.addEventListener("click", async () => {
  // 状态未加载完成时拦截操作
  if (isIdSaved === null) return;

  try {
    if (!isIdSaved) {
      // 状态为不存在，执行添加逻辑
      await db.collection("your_target_collection").doc(targetDocId).set({
        // 替换为你实际要存储的字段内容
        createTime: Date.now()
      });
      isIdSaved = true;
      // 切换按钮为已添加的UI样式
    } else {
      // 状态为已存在，执行删除逻辑
      await db.collection("your_target_collection").doc(targetDocId).delete();
      isIdSaved = false;
      // 切换按钮为未添加的UI样式
    }
  } catch (error) {
    console.error("数据库操作失败：", error);
    // 操作失败时不更新本地状态，可增加提示引导用户重试
  }
})

避坑提醒：不要在点击回调里嵌套onSnapshot这类实时监听方法，否则只要数据发生变更就会触发回调逻辑，很容易出现非预期的重复操作。

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