我一直在为一个投资组合网站使用TypeScript进行Next.js项目。在我的Home功能组件中，我试图使用useState钩子初始化状态，并从组件的props设置初始值。组件签名看起来像：

type Props = {

  pageInfo: PageInfo;
  experiences: Experience[];
  skills: Skill[];
  projects: Project[];
  socials: Social[];

};

export default function Home(props: Props){

const [pageInfo, setPageInfo] = useState<PageInfo>(props.pageInfo);
const [experiences, setExperiences] = useState<Experience[]>(props.experiences);
const [skills, setSkills] = useState<Skill[]>(props.skills);
const [projects, setProjects] = useState<Project[]>(props.projects);
const [socials, setSocials] = useState<Social[]>(props.socials);

  useEffect(() => {
    async function fetchData() {
      if (!projects || projects.length === 0) setProjects(await fetchProjects());
      if (!socials || socials.length === 0) setSocials(await fetchSocials());
      if (!skills || skills.length === 0) setSkills(await fetchSkills());
      if (!experiences || experiences.length === 0) setExperiences(await fetchExperiences());
      if (!pageInfo || Object.keys(pageInfo).length === 0) setPageInfo(await fetchPageInfo());
      
    }
    
    fetchData();

  }, []);

字符串
当尝试使用vercel编译和部署时，我遇到了一个与props类型相关的TypeScript错误。
这里是错误
第一个月
有什么不同的方法，我可以初始化这些 prop 在家里，并有他们传递到不同的功能组件。
目前，代码在运行'npm run dev'时进行编译，但使用vercel时，构建是使用'npm run build'运行的，我得到了类型错误。
理想情况下，我想使用GetStaticProps或GetServerSideProps，然而，next.js的page.tsx文件位于src/app路由器目录中。如果我将其从src目录中移出，并将其放入单独的pages目录中，我会得到404 page not found错误（即使在重建后）。