如何获取点击项Firestore文档ID并删除对应卡片数据库记录

核心要完成3个环节的逻辑调整：

• 读取文档时同步保存Firestore为每个文档生成的唯一ID
• 渲染卡片、生成删除按钮时把对应文档ID绑定到DOM元素上
• 点击删除时读取绑定的ID调用Firestore删除接口，借助已有的实时监听能力自动同步页面状态

第一步：修改数据读取逻辑，留存文档ID #

你当前的代码只通过change.doc.data()读取了文档的业务字段，漏掉了change.doc.id这个和数据库文档一一对应的唯一标识，读取时需要把ID合并到数据对象中，同时补全删除事件触发后的DOM移除逻辑：

function getBanks() {
  db.collection("banks").onSnapshot((snapshot) => {
    snapshot.docChanges().forEach((change) => {
      // 将文档ID合并到业务数据对象中
      const bank = {
        ...change.doc.data(),
        docId: change.doc.id // 存储Firestore返回的文档唯一ID
      };
      if (change.type === "added") {
        generateBanks([bank]);
      } else if (change.type === "removed") {
        // 监听到数据库文档删除后，自动移除页面对应卡片
        document.querySelector(`[data-bank-id="${bank.docId}"]`)?.remove();
        console.log("Removed bank: ", bank );
      }
    });
  });
}

第二步：渲染卡片时绑定ID、给删除按钮加事件 #

生成卡片外层容器时用自定义属性存储文档ID，给删除按钮绑定点击事件，触发时调用Firestore删除接口即可：

function generateBanks(banks) {
  banks.forEach((bank) => {
    // ... 保留你原有的其他卡片元素生成逻辑

    // 卡片外层容器绑定文档ID，方便后续定位删除
    const bankCard_el = document.createElement("div");
    bankCard_el.classList.add("bank-card");
    bankCard_el.dataset.bankId = bank.docId;

    const bank_delete_el = document.createElement("button");
    bank_delete_el.classList.add("delete");
    bank_delete_el.innerText = "Delete";
    // 绑定删除点击事件
    bank_delete_el.addEventListener("click", async () => {
      try {
        // 直接读取当前卡片对应的文档ID调用删除接口
        await db.collection("banks").doc(bank.docId).delete();
        // 无需手动写DOM删除逻辑，onSnapshot监听到数据变更会自动处理
      } catch (err) {
        console.error("删除失败:", err);
      }
    });

    // ... 保留你原有的元素挂载逻辑，注意把删除按钮、其他卡片内容挂载到卡片容器中
    bankCard_el.append(bank_delete_el);
    // 替换为你页面实际的卡片容器选择器
    document.querySelector("#banks-container").append(bankCard_el);
  });
}

注意事项 #

• 不要在前端自行生成随机ID作为删除依据，必须使用Firestore返回的doc.id，这是和数据库文档绑定的唯一可信标识
• 因为用了onSnapshot实时监听，不要在点击删除的回调里手动移除DOM，统一在监听的removed分支处理DOM更新，避免前端页面和数据库状态不一致
• 上线前需要在Firestore控制台配置安全规则，给对应集合开放符合业务要求的删除权限，否则前端调用删除接口会报权限错误

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