React项目操作Firestore删除指定文档失败，如何排查代码问题？

核心问题梳理 #

• 点击事件绑定位置错误
  你将onClick={deleteMail}绑定在了<Delete>图标组件上，外层的IconButton才是实际接收点击交互的容器，只有精准点击图标极小区域才可能触发事件，绝大多数点击按钮的操作都不会生效。
• 异步逻辑执行顺序错误
  Firestore的get()、delete()都是异步Promise操作，你把history.push("/")写在异步逻辑外部，会导致删除请求还没执行完成就跳转到首页，组件提前卸载终止未完成的异步操作，最终删除不生效。
• 删除逻辑冗余、容错性不足
  如果selectedMail中的id就是Firestore文档的原生ID，你用where查询匹配id再遍历删除的逻辑完全冗余，直接通过文档ID定位删除效率更高。同时缺少非空判断和错误捕获逻辑，空值、权限、网络等异常都无法被感知，不利于问题排查。

修复代码 #

1. 修正删除逻辑

如果selectedMail.id对应Firestore emails集合的文档原生ID，直接用以下代码替换原有deleteMail函数：

const deleteMail = () => {
    // 非空判断避免空值报错
    if (!selectedMail?.id) return
    db.collection('emails').doc(selectedMail.id).delete()
        .then(() => {
            console.log('邮件删除成功')
            // 删除完成后再跳转页面
            history.push("/")
        })
        .catch(error => {
            // 捕获错误方便排查
            console.error('删除失败：', error)
        })
}

如果id是存在于文档内部的自定义字段，保留查询逻辑的修正版本如下：

const deleteMail = () => {
    if (!selectedMail?.id) return
    db.collection('emails').where('id', '==', selectedMail.id).get()
        .then(querySnapshot => {
            const deleteTasks = []
            querySnapshot.forEach(doc => {
                deleteTasks.push(doc.ref.delete())
            })
            // 等待所有删除操作执行完成
            return Promise.all(deleteTasks)
        })
        .then(() => {
            console.log('匹配邮件删除成功')
            history.push("/")
        })
        .catch(error => {
            console.error('删除失败：', error)
        })
}

2. 修正点击事件绑定

将点击事件从Delete图标移到外层的IconButton组件上：

<IconButton onClick={deleteMail}>
    <Delete/>
</IconButton>

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