如何通过react-firebase-hooks同时获取Firebase文档ID与文档数据并传递给组件Props

嘿，这个问题我刚好处理过，react-firebase-hooks其实内置了很便捷的解决方案，只需要加个配置参数就能搞定，我一步步给你拆解：

1. 用idField参数注入文档ID #

useCollectionData的第二个参数支持配置对象，其中idField可以指定一个字段名，Firebase会自动把每个文档的ID注入到返回的数据对象里。比如我们指定idField: 'id'，那每个todo对象里就会多出一个id字段，值就是对应文档的ID。

2. 修改你的代码实现 #

首先要处理user可能为null的情况（用户未登录时），避免访问user?.email触发报错；然后给useCollectionData加上配置：

const TodoList: FC = () => { 
  const [user] = useAuthState(auth);

  // 用户未登录时显示提示，避免后续路径报错
  if (!user) {
    return <section className="todo-list">请先登录</section>;
  }

  // 添加idField配置，将文档ID注入到每个todo对象的id字段中
  const [todos] = useCollectionData(
    collection(db, `users/${user.email}/todos`),
    { idField: 'id' }
  ); 

  return ( 
    <section className="todo-list"> 
      {todos?.map(todo => ( 
        <Todo 
          key={todo.id} // 用文档ID做列表项的key是最佳实践
          id={todo.id}
          isCompleted={todo.isCompleted} 
          text={todo.text} 
        /> 
      ))} 
    </section> 
  ) 
}

3. 子组件接收ID属性 #

最后要确保你的Todo组件的Props类型包含id字段，比如：

interface TodoProps {
  id: string;
  isCompleted: boolean;
  text: string;
}

const Todo: FC<TodoProps> = ({ id, isCompleted, text }) => {
  // 这里就可以用id做各种操作了，比如修改文档状态、删除文档等
  return (
    <div className={`todo ${isCompleted ? 'completed' : ''}`}>
      <input type="checkbox" checked={isCompleted} />
      <span>{text}</span>
      {/* 举个例子：用id绑定删除操作 */}
      <button>删除</button>
    </div>
  );
};

这样就完美实现了同时获取文档ID和数据，并传递给子组件的需求，是不是很省心？

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