如何从Firestore的Map对象中取值并在React中正确渲染

你遇到的错误是因为直接把Firestore返回的对象作为React子元素渲染了——React无法直接解析对象类型的内容，只能渲染字符串、数字、React元素等合法子元素。结合你的代码和console输出，Data是一个以学号为键、项目信息对象为值的结构，比如：

{
  "G2062059": { grp_id: "xxx", pTitle: "项目标题", status: "pending", pDescription: "描述" },
  // 其他学号对应的对象...
}

针对你的需求，分两种场景解决： #

场景1：渲染指定学号（reg_no）对应的项目信息

直接渲染对象的具体字段，不要直接渲染整个对象。同时注意初始渲染时Data可能为空，用**可选链操作符?.**避免报错：

修改后的代码片段：

import React, { useEffect, useState } from "react";
import Sidebar from "./Sidebar";
import Navbar from "./Navbar";
import MyStyledCard from "./RequestCard";
import { getDoc, doc } from "firebase/firestore";
import { db } from "../firebase";

export default function Requests() {
  // 初始状态改为空对象，匹配Firestore返回的结构
  const [data, setData] = useState({}); 
  const reg_no = "G2062059";

  useEffect(() => {
    const fetchData = async () => {
      const docRef = doc(db, "meta", "project-ideas");
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setData(docSnap.data());
      } else {
        console.log("No such document!");
      }
    };
    fetchData();
  }, []);

  return (
    <div className="requests_out">
      <div className="requsts_side">
        <Sidebar />
      </div>
      <div className="requests_main">
        <Navbar />
        <div className="widgets">
          {/* 渲染对象的具体字段，用可选链避免初始加载时的undefined报错 */}
          <h2>{data[reg_no]?.pTitle}</h2>
          <p>状态：{data[reg_no]?.status}</p>
          <p>项目描述：{data[reg_no]?.pDescription}</p>
        </div>
      </div>
    </div>
  );
}

场景2：将所有项目对象传递给卡片组件渲染

如果要把Firestore返回的所有Map对象都传给MyStyledCard组件，需要先把对象转成数组（用Object.values()提取所有值），再通过map遍历渲染：

修改后的代码片段：

import React, { useEffect, useState } from "react";
import Sidebar from "./Sidebar";
import Navbar from "./Navbar";
import MyStyledCard from "./RequestCard";
import { getDoc, doc } from "firebase/firestore";
import { db } from "../firebase";

export default function Requests() {
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      const docRef = doc(db, "meta", "project-ideas");
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setData(docSnap.data());
      } else {
        console.log("No such document!");
      }
    };
    fetchData();
  }, []);

  // 将对象转为数组，方便遍历渲染卡片
  const projectList = Object.values(data);

  return (
    <div className="requests_out">
      <div className="requsts_side">
        <Sidebar />
      </div>
      <div className="requests_main">
        <Navbar />
        <div className="widgets">
          {/* 遍历数组，把每个项目对象的字段传给卡片组件 */}
          {projectList.map((project) => (
            <MyStyledCard 
              key={project.grp_id} // 用唯一标识grp_id作为key，比index更稳定
              grpId={project.grp_id}
              title={project.pTitle}
              status={project.status}
              description={project.pDescription}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

额外注意点： #

• 变量名尽量用小驼峰（比如data而非Data），符合React代码规范。
• 渲染列表时，优先用数据里的唯一标识（比如grp_id）作为key，避免用index导致列表更新时的性能问题。
• 初始状态设为{}而非[]，和Firestore返回的键值对对象类型匹配更合理。

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