在 Next.js 中预取数据时遇到问题

Question

我有一个简单的虚拟 API，它返回对象虚拟数据数组，例如：

// api/projectsdata.js

    export default function handler(req, res) {
      res.status(200).json([{...},{...},{...}]
    }

我的获取 API 如下所示：

import { useEffect, useState } from "react";

const ProjectsUtil = () => {
  const [data, setData] = useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch("http://localhost:3000/api/projectsdata");
      const data = await response.json();

      if (response.ok) {
        setData(data);
      }
    } catch (error) {
      throw new Error(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return data !== null && data;
};

export default ProjectsUtil;

我尝试使用下面的两个辅助函数来获取：

export const getAllProjects = () => {
  const data = ProjectsUtil();
  return data;
};

export const getProjectByName = (name) => {
  const data = getAllProjects();
  return data.filter((project) => project.name === name);
};

在另一个组件中，我尝试预取并使用数据，例如：

const SingleProjectDetails = (props) => {
  return <ProjectDetails props={props.projectData[0]} />;
};

export function getStaticProps(context) {
  const { params } = context;
  const { id } = params;
  const projectData = getProjectByName(id);

  return {
    props: {
      projectData: projectData,
    },
    revalidate: 600,
  };
}

export function getStaticPaths() {
  const projectsData = getAllProjects();

  return {
    paths: projectsData.map((project) => ({
      params: {
        id: project.name,
      },
    })),
    fallback: true,
  };
}

我收到错误：

TypeError: Cannot read properties of null (reading 'useState')

。

令人困惑的部分是我的获取 API 函数在其他组件中运行良好。另外，如果我将虚拟数据初始化为普通对象数组而不是来自 API 的调用，则一切正常。看起来有什么问题吗？不允许预取 API 吗？