React+Firebase开发Todo清单时删除带唯一ID的列表项报错如何解决

报错TypeError: Cannot read properties of undefined (reading 'id')是由props传递不匹配、Firebase集合名不一致两个核心问题导致的，具体修复步骤如下：

1 修正AddLink.js中Todo组件的传参逻辑 #

找到渲染Todo列表的代码段，修改prop命名和key取值：

// 原错误代码
{todos.map((todo, id) => (
  <Todo value={todo} key={id} />
))}

// 修改后代码
{todos.map((todo) => (
  <Todo todo={todo} key={todo.id} />
))}

修改点说明：

• 将prop名从value改为todo，和Todo组件内部的取值逻辑对齐
• 用todo自身的id作为列表key，避免用map索引导致的列表重排渲染异常

2 修正Todo.js中的取值逻辑和集合名 #

修改两处错误点：待办内容取值、删除操作的集合名，修改后的核心代码如下：

function Todo(props) {
  const deleteHandler = () => {
    // 集合名和添加待办时的集合名保持一致，改为links
    db.collection("links").doc(props.todo.id).delete();
  };

  return (
    <li className={classes.adminsection}>
      <div className={classes.linkCards}>
        {/* 从传入的todo对象中取待办内容，替换原来的props.text */}
        <h3>{props.todo.todo}</h3>
        <p>This is a new link</p>
        <div>
          <AiOutlinePicture />
          <AiOutlineStar />
          <GoGraph />
          <DeleteForeverIcon onClick={deleteHandler} />
        </div>
      </div>
    </li>
  );
}

可选优化项 #

你在添加待办时额外生成了uuid作为id存入字段，但Firebase添加文档时会自动生成全局唯一的文档id，你在快照监听逻辑中已经通过doc.id取到了这个自动生成的id，所以添加待办的逻辑里可以删掉id: uuidv4()字段，不会影响功能运行。

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