React onClick事件不触发？绑定Firebase删除操作时报类型错误如何解决

错误原因 #

你遇到的问题有两个核心错误点：

• onClick 属性要求传入函数类型的回调，你直接书写 firestore.collection("messages").doc().delete() 会在组件渲染时立刻执行删除操作，执行后返回的 Promise 对象被传递给 onClick，触发类型不匹配报错。
• 调用 doc() 时没有传入对应消息的文档ID，无法定位到你需要删除的单条消息文档，即使修复执行时机问题也无法正确删除目标数据。

修复步骤 #

1. 首先确保你从Firestore查询消息列表时，把每条消息对应的文档ID挂载到了消息数据上，比如 props.message 中包含 id 字段，值为对应Firestore文档的唯一ID。
2. 用箭头函数包裹删除逻辑，让删除操作仅在按钮点击时触发。

修复后代码示例 #

const { text, uid, id } = props.message; // 新增获取消息文档id
const messageClass = uid === auth.currentUser.uid ? "sent" : "received";

// 定义删除消息的处理函数
const handleDeleteMessage = async () => {
  try {
    await firestore.collection("messages").doc(id).delete(); // 传入文档id定位目标数据
  } catch (err) {
    console.error("删除消息失败：", err);
    // 可在这里添加删除失败的用户提示
  }
};

return (
  <>
    <div className={`message ${messageClass}`}>
      <p>{text}</p>
      {/* 仅自己发送的消息显示删除按钮，同时onClick传入函数引用 */}
      {messageClass === "sent" && (
        <button onClick={handleDeleteMessage}>
          Delete
        </button>
      )}
    </div>
  </>
);
}

额外优化建议 #

• 可以给删除按钮添加点击后loading状态，避免用户重复点击触发多次删除请求
• 建议在Firestore安全规则中添加校验，仅允许消息的发送者删除对应文档，防止前端被篡改后任意删除他人消息

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