React集成Cloud Firestore：如何正确获取并打印文档ID

问题根源 #

你代码里的核心问题是状态类型不匹配：

• 用map把文档数据和doc.id组合成了数组tasksData，但你把这个数组赋值给了初始定义为对象的fetch状态
• 当你尝试访问fetch.id时，本质是在访问数组的id属性——数组本身没有这个属性，所以自然返回undefined

修复方案 #

1. 修正状态初始值 #

先把fetch的初始值从对象改成空数组，和后续要存的数据类型匹配：

const [fetch, setFetch] = useState([]);

2. 正确获取并打印文档ID #

拿到正确的tasksData数组后，你可以通过遍历数组来获取每个文档的ID：

useEffect(() => {
  const getTasks = async () => {
    const querySnapshot = await getDocs(collection(db, "tasks"));
    const tasksData = querySnapshot.docs.map(doc => ({
      ...doc.data(),
      id: doc.id // 这里已经正确把ID合并进每个对象了
    }));
    setFetch(tasksData);
    
    // 打印所有文档ID
    tasksData.forEach(task => {
      console.log("当前文档ID:", task.id);
      // 同时也能打印完整文档数据
      console.log("当前文档数据:", task);
    });
  };
  getTasks();
}, []);

3. 单个文档ID的获取方式 #

如果只需要某一个特定文档的ID（比如第一个），直接通过数组索引访问就行，记得用可选链避免数组为空时报错：

// 打印第一个文档的ID
console.log(fetch[0]?.id);

额外说明 #

控制台能看到完整数据是因为tasksData本身是正确的，只是你把它存到了类型不匹配的状态里，导致后续访问方式出错。后续渲染列表的时候，直接遍历fetch数组，每个item都能正常拿到id属性。

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