React操作Firebase Firestore时Todo列表删除功能无响应问题求助

核心故障原因 #

• 父组件渲染TodoList时未将Firestore文档ID作为props传入子组件，子组件内获取到的id值为undefined，执行删除操作时无法定位到目标文档，因此删除逻辑不生效。
• 删除逻辑未添加错误捕获，操作触发异常时控制台无报错提示，提升了问题排查难度。

具体修复代码 #

1. 修改TodoInput组件的列表渲染逻辑，补传id属性
   找到遍历saved数组渲染TodoList的代码段，添加id={id}属性传参：

   {saved.map(({id, data:{title}})=>(
       <TodoList className="todoList1" key={id} id={id} title={title} icon />
   ))}
   

2. 优化TodoList组件的删除方法，增加错误捕获
   替换原有deleteTodo方法，支持异步操作和错误提示：

   const deleteTodo = async () => {
     try {
       await db.collection('Todo').doc(id).delete()
     } catch (error) {
       console.error('待办删除失败：', error)
     }
   }
   

可选优化项 #

当前表单提交逻辑绑定在提交按钮的onClick事件上，建议将handleSubmit方法绑定到<form>标签的onSubmit事件上，同时移除按钮上的onClick绑定，避免回车键触发表单提交时出现逻辑异常，修改后表单代码如下：

<form onSubmit={handleSubmit}>
    <input required type="text" placeholder="What to do ?" value={todos} onChange={(e)=>setTodos(e.target.value)} />
    <button type="submit">ADD TODO</button>
</form>

内容的提问来源于stack exchange，提问作者Yanničk Sims