是否存在一些 useEffect 和 useState 行为可以解释为什么只有其中一个实例起作用？

我用它useEffect来获取数据。这些数据会被传递给一个状态，然后作为组件的 prop 进行相应的渲染/填充。以下是可以运行的代码：

const [projects, setProjects] = useState([]);

useEffect(() => {
  const q = query(collection(db, "projects"), orderBy("update", "desc"));
  const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
    const fetched = [];
    QuerySnapshot.forEach((doc) => {
      fetched.push({ ...doc.data(), id: doc.id });
    });
    const sortedProjects = fetched.sort((a, b) => a.update - b.update);
    setProjects(sortedProjects);
  });
  return () => unsubscribe;
}, []);

上面的代码正确地获取了数据，然后将其传递给一个组件，该组件随后使用 map 显示项目列表。为了简化流程，我想看看是否可以对简历数据做同样的处理。代码如下：

const [edu, setEducation] = useState([]);

useEffect(() => {
  const q = query(
    collection(db, "resume/resume/education"),
    orderBy("startDate")
  );
  const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
    const fetched = [];
    QuerySnapshot.forEach((doc) => {
      fetched.push({ ...doc.data(), id: doc.id });
    });
    const sortedEdu = fetched.sort(
      (a, b) => a.startDate.nanoseconds - b.startDate.nanoseconds
    );
    setEducation(sortedEdu);
  });
  return () => unsubscribe;
}, []);

这个不知为何不起作用。我检查了数据是否正在被检索（确实如此），并且useEffect和useState似乎正常工作。我甚至在组件中添加了登录信息，数据确实从登录端显示了出来，但仍然出现 map 错误，提示数组未定义，导致 React 无法渲染。我还知道，当我尝试直接输入数据时，这些组件是可以正常工作的。这可能是什么原因造成的？

我直接复制粘贴了这些值，然后调整了一下，问题依然存在。为了清晰起见，以下是问题组件：

export const ResumeItemLister = ({ items, sectionTitle }) => {
  return (
    <div>
      <h2 className="text-xl text-left">{sectionTitle}</h2>
      <hr />
      <table>
        {items.map(({ title, location, date, bullets }) => (
          <tr className="pt-10">
            <div className="grid grid-cols-3">
              <td className="text-left">{date}</td>
              <td className="col-span-2">
                <div className="text-left">
                  {title ? (
                    <p>
                      <bold className="font-bold">{title}</bold>, {location}
                    </p>
                  ) : (
                    <p>{location}</p>
                  )}
                  <ul>
                    {bullets.map((text) => (
                      <li className="list-disc list-inside"> {text}</li>
                    ))}
                  </ul>
                </div>
                <br />
              </td>
            </div>
          </tr>
        ))}
      </table>
    </div>
  );
};

只要我在父组件中明确设置了这些项，就可以正常工作。但是，使用获取到的状态，我得到：

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

我理解这意味着 items 未定义，但正如我提到的，情况并非如此。任何帮助我都非常感谢。