点击按钮无法删除Cloud Firestore文档，报文档ID未定义错误

我来帮你搞定这个问题！你遇到的ReferenceError是因为生成按钮的内联onclick事件时，没给文档ID字符串加引号，浏览器把文档ID当成了未定义的变量，自然就报错了。

问题根源 #

看你生成按钮的这段代码：

p.innerHTML+="<button onclick=delet("+String(d)+")>Hello</button>";

比如文档ID是ds5678fhiksnie，这段代码会生成：

<button onclick=delet(ds5678fhiksnie)>Hello</button>

浏览器会把ds5678fhiksnie识别为变量名，但这个变量根本不存在，所以抛出了ReferenceError。

快速修复方案 #

给传递的文档ID加上单引号，让浏览器把它当成字符串处理：

p.innerHTML += `<button onclick="delet('${d}')">删除文档 ${d}</button>`;

这里用了模板字符串（反引号），能更清晰地拼接字符串，避免引号嵌套的混乱问题。

更优写法：使用事件委托 #

内联事件绑定虽然简单，但不利于维护和安全，推荐用事件委托的方式，把事件绑定在父元素.parent上，这样不管后续新增多少按钮，都能正常触发删除逻辑：

修改后的完整代码如下：

<html>
<body>
<!-- parent named class inner buttons according document stored in cloud-firestore-->
<div class="parent"></div>
<!-- api -->
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-firestore.js"></script>
<script>
// web setup this is sample
const config = {
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
};
firebase.initializeApp(config); // 修复：移除了重复的initializeApp调用
</script>
<script>
var db = firebase.firestore();
// inserting one record automatic id
db.collection("users").add({
  first: "Ada",
  last: "Lovelace",
  born: 2000
})
.then(function(docRef) {
  console.log("Document written with ID: ", docRef.id);
})
.catch(function(error) {
  console.error("Error adding document: ", error);
});
// get element
var p = document.querySelector(".parent");
// display the document
db.collection("users").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
    var docId = doc.id;
    console.log(docId);
    // 用data-属性存储文档ID，按钮文本更直观
    p.innerHTML += `<button data-doc-id="${docId}">删除文档 ${docId}</button>`;
  });
});

// 事件委托：给父元素绑定点击事件
p.addEventListener('click', function(e) {
  // 判断点击的是按钮元素
  if(e.target.tagName === 'BUTTON') {
    const docId = e.target.dataset.docId;
    delet(docId);
  }
});

// delete function(id passing)
function delet(docId) {
  console.log("要删除的文档ID：", docId);
  db.collection("users").doc(docId).delete().then(function() {
    console.log("Document successfully deleted!");
    // 可选：删除文档后移除对应的按钮
    event.target.remove();
  }).catch(function(error) {
    console.error("Error removing document: ", error);
  });
}
</script>
</body>
</html>

另外帮你修正了一个小问题：之前代码里重复调用了firebase.initializeApp(config)，这会导致初始化错误，现在只保留了一次正确的调用。

这样修改后，点击按钮就能正确传递文档ID，成功删除Firestore里的目标文档啦！

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