Firestore删除时仅删除最新创建文档而非选中文档问题求助

• 点击删除始终删除最后一条文档：你在循环中用var声明docID变量，var存在变量提升属于函数作用域，整个循环只会共享同一个docID变量，循环结束后该变量存储的是最后一条文档的ID。你给删除按钮绑定点击事件时，读取的始终是这个最终值，所以不管点哪个按钮都会删最后一条。
• 创建文档后页面刷新：大概率是你创建文档的触发按钮放在了<form>标签内，按钮默认是submit类型，点击会触发表单默认提交行为导致页面重载，页面刷新后内存中存储的临时ID都会丢失，也会进一步影响删除逻辑的取值。

1. 替换变量声明关键字
   将循环内的var改为const/let，利用块级作用域让每次循环的docID相互独立，绑定事件时可以取到当前循环对应文档的ID：

db.collection("flights").get().then((snapshot) =>{ 
  snapshot.docs.forEach(doc => {
    const data = doc.data();
    const docID = doc.id; // 把var改成const
    // 渲染页面元素、绑定删除事件的逻辑写在这里，直接传当前docID到deleteFlight
    // 示例绑定逻辑：
    const delBtn = document.createElement("button");
    delBtn.innerText = "删除航班";
    delBtn.addEventListener("click", () => deleteFlight(docID))
    // 把按钮插入到对应航班的dom节点中
  })
})

如果你是用字符串拼接的方式生成DOM，确保拼接的是当前循环的docID即可：

const flightHtml = `
  <div class="flight-item">
    <span>航班号：${data.flightNumber}</span>
    <button onclick="deleteFlight('${docID}')">删除</button>
  </div>
`

2. 阻止表单默认提交行为
   找到创建新文档的触发逻辑，若使用form表单提交，给提交事件加阻止默认行为的代码：

// 假设你的表单id是addFlightForm
document.querySelector("#addFlightForm").addEventListener("submit", (e) => {
  e.preventDefault(); // 新增这行，阻止默认刷新
  // 你原来的创建Firestore文档的逻辑写在这里
})

3. 调试验证
   可以在deleteFlight函数第一行加console.log("当前要删除的文档ID：", docID)，点击删除按钮时检查控制台输出的ID是否和你选中的文档ID一致，确认参数传递正确。

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