React获取Firestore集合数据重复请求且无法渲染问题

1. 解决数据重复拉取问题 #

你当前使用的useEffect没有传入第二个依赖数组参数，会导致每次组件渲染完成后都重新执行useEffect内部逻辑。你调用setSubjects更新状态会触发组件重新渲染，渲染结束又会执行useEffect拉取数据、再次更新状态，就形成了无限循环的重复请求。
修复方式是给useEffect添加空数组[]作为第二个参数，这样拉取逻辑只会在组件首次挂载完成后执行一次：

useEffect(() => {
  // 原有拉取逻辑保持不变
}, []); // 新增空依赖数组

2. 解决h1标签无内容问题 #

你代码里setSubjects(data)之后打印的subjects是空数组，是因为React的状态更新是异步的，修改后不会立刻返回最新值，这个特性不影响页面渲染。如果确认拉取到的data里已经有带title字段的对象但还是渲染不出内容，可按以下方式调整：

• 先确认每个doc.data()中确实存在title属性，不确定的话可以先渲染JSON.stringify(subject)确认返回的字段结构
• 可在遍历前加非空判断避免异常：

return(
  <>
    {subjects.length > 0 ? subjects.map(subject =>(
      <h1 key={subject.title}>{subject.title}</h1>
    )) : <p>暂无数据</p>}
  </>
);

修复后完整代码 #

import { useState, useEffect } from 'react';
export default function Subjects() {
  const [subjects, setSubjects] = useState([]);

  useEffect(() => {
    async function fetchSubjects(){
      const data = []
      await db.collection("Subjects").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            data.push(doc.data());
        });
      })
      .catch((error) => {
          console.log("Error getting documents: ", error);
      });
      setSubjects(data);
    }
    fetchSubjects();
  }, []); 

  return(
    <>
      {subjects.map(subject =>(
        <h1 key={subject.title}>{subject.title}</h1>
      ))}
    </>
  );
};

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