Firebase删除数据报doc is not a function错误怎么解决

核心报错根源：变量名冲突 #

你定义的renderList函数形参命名为doc，和Firebase模块化SDK导出的doc构造函数重名了。点击事件回调执行时，作用域优先读取当前函数的形参doc（该参数是Firestore返回的文档快照对象，不是函数），因此调用doc(firestore, "admin", id)时抛出类型错误。

其他关联问题 #

• ID重复问题：你给所有删除按钮设置了相同的id="DelModBtn"，HTML中ID全局唯一，document.querySelector('#DelModBtn')只会匹配页面第一个删除按钮，后续行的删除事件绑定会失效。
• ID获取逻辑错误：删除按钮的直接父元素是你创建的ControlDiv，你把data-id属性挂载在tr节点上，直接调用e.target.parentElement.getAttribute('data-id')只能读取到ControlDiv的属性，无法拿到正确的文档ID。

修复后的代码示例 #

// 首先确认你头部已经正确导入相关方法，v9+模块化语法如下
// import { doc, deleteDoc } from "firebase/firestore";

// 1. 把形参名改成不会和SDK方法冲突的名字，比如docSnapshot
function renderList(docSnapshot){        
    let trow = document.createElement('tr');
    let td1 = document.createElement('td');
    let td2 = document.createElement('td');
    let ControlDiv = document.createElement("div");
    const date = docSnapshot.data().created.toDate().toDateString();
    trow.setAttribute('data-id', docSnapshot.id);
    td1.textContent = docSnapshot.data().email;
    td2.textContent = date;
    // 2. 移除重复的id属性
    ControlDiv.innerHTML = '<button type="button" class="btn btn-danger btn-primary my-2 ml-2">Delete</button>'
    trow.appendChild(td1);
    trow.appendChild(td2);
    trow.appendChild(ControlDiv);
    adminList.appendChild(trow);
    // 3. 直接从当前ControlDiv下找按钮，不用全局querySelector
    const deleteBtn = ControlDiv.querySelector('button');
    deleteBtn.addEventListener('click', async (e) => {
        e.stopPropagation();
        // 4. 正确获取tr上的data-id，用closest方法更稳妥，避免层级修改后失效
        let id = e.target.closest('tr').getAttribute('data-id');
        // 现在这里的doc就是你导入的SDK方法，不会冲突
        await deleteDoc(doc(firestore, "admin", id));
    })    
}

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