React Native中如何获取每个TaskItem对应的Firestore文档ID？

核心结论 #

• doc.id属于Firestore文档的元数据，不会默认和doc.data()返回的业务字段绑定，你需要手动把id添加到任务数据对象中，再通过props传给<TaskItem>组件，组件本身不会自动关联存储这个id。

第一步：修改数据拉取逻辑 #

你当前的代码只把文档的业务字段（doc.data()的返回值）存入了数组，漏掉了id字段，修改拉取代码如下：

db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
  const tempTasks = [];
  snapshot.forEach(
    doc => {
      // 解构原有业务字段，新增id字段存储文档id
      tempTasks.push({...doc.data(), id: doc.id});
    }
  )
  setTasks(tempTasks);
});

第二步：按需传递id、在点击时获取 #

有两种常见用法，根据你的业务需求选择即可：

用法1：父组件直接在点击回调中获取id #

不需要把id传入<TaskItem>内部，直接在遍历的onPress回调里使用当前遍历项的id：

<View style={styles.tasks}>
  {tasks1.map((task) => {
    return (
      <View style={{ margin: 4}} key={task.id}>
        <TaskItem
          // 原有props保持不变
          notes={task.notes}
          reminder={task.reminder}
          name={task.name}
          assigned={task.assigned}
          tagName = {task.tag}
          profileImage={task.profileImage}
          color={task.color}
          changeModal={() => changeStateHandler()}
          onPress={()=>{
            setTagClicked(!tagClicked)
            // 这里直接就能拿到当前任务的id，做你需要的操作
            console.log('当前选中任务的文档id：', task.id)
          }}
        />
      </View>
    );
  })}
</View>

注意：遍历渲染列表项时最好给外层容器加key={task.id}，避免React的渲染警告，同时优化渲染性能。

用法2：把id传入<TaskItem>内部使用 #

如果<TaskItem>组件内部需要用到文档id，直接新增props传递即可：

<TaskItem
  // 新增id的props
  taskId={task.id}
  // 原有props保持不变
  notes={task.notes}
  reminder={task.reminder}
  // ...其余原有props
/>

之后在<TaskItem>组件内部直接通过props.taskId就能拿到对应文档的id。

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