React中如何使用Firebase v9 Firestore的docRef.id映射渲染帖子数据

当前实现存在两处错误：

• 未对Firestore的posts集合配置数据监听，本地posts状态没有同步集合内的全量文档数据，自然无法正确拿到每个文档的id和对应字段完成渲染
• 列表遍历时给Post组件传递的message属性错误绑定了输入框状态input，没有使用当前遍历帖子自身的message字段，导致内容显示异常

1. 导入依赖 #

首先确保引入Firebase v9对应方法和React钩子：

import { useState, useEffect } from "react";
import { collection, addDoc, serverTimestamp, onSnapshot } from "firebase/firestore";
import Post from "./Post";
// db为你项目中已初始化完成的Firestore实例

2. 配置实时数据同步 #

在组件内通过onSnapshot监听posts集合变化，自动拉取包含文档ID的全量数据，不需要手动维护新增文档的ID：

function PostFeed() {
  const [input, setInput] = useState("");
  const [posts, setPosts] = useState([]);

  // 组件挂载时启动监听
  useEffect(() => {
    const postsCol = collection(db, "posts");
    // 快照回调会在集合数据变化（新增/修改/删除）时自动触发
    const unsubscribe = onSnapshot(postsCol, (snapshot) => {
      setPosts(
        snapshot.docs.map((doc) => ({
          id: doc.id, // 此处ID和addDoc返回的docRef.id完全一致
          data: doc.data()
        }))
      );
    });
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, []);

3. 保留原有发帖提交逻辑 #

你之前的addDoc写入逻辑不需要修改，数据写入成功后onSnapshot会自动同步新数据到本地状态：

const handleSubmit = async (e) => {
    e.preventDefault();
    const docRef = await addDoc(collection(db, "posts"), {
      name: "Vishesh",
      description: "Graphic Designer | Web Designer",
      message: input,
      timestamp: serverTimestamp(),
    });
    console.log("Document written with ID: ", docRef.id);
    setInput("");
  };

4. 修正列表渲染的传值错误 #

把message属性的绑定值从全局input改为当前遍历项的message字段：

return (
    <div>
      {/* 省略你的发帖表单代码 */}
      {posts.map(({ id, data: { name, description, message } }) => (
        <Post
          key={id}
          name={name}
          description={description}
          message={message}
        />
      ))}
    </div>
  )
}

• addDoc返回的docRef.id是单条新增文档的唯一标识，不需要手动插入到本地posts数组，实时监听机制会自动完成数据同步
• 用Firestore返回的文档ID作为列表渲染的key是最优实践，比数组索引更稳定，不会出现列表项渲染错位的问题

当前问题对应的运行效果参考：

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