You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js+TypeScript下getStaticProps类型不匹配报错如何解决?

错误核心原因

你的报错和ParsedUrlQuery没有任何关联,这个类型只是GetStaticProps的第二泛型参数,用于定义动态路由参数的类型,你当前场景没有用到动态路由参数,不需要额外导入处理。

报错的根本原因是类型不匹配:
你定义的HomeProps接口要求页面接收的属性必须包含menu(类型为MenuItem[])和firstCategory两个必填字段,但你在getStaticProps返回的属性里,仅提供了data和firstCategory,缺少必填的menu字段,触发了TS的类型校验报错。
另外注意你的HomeProps继承Record<"string", unknown>写法有误,带引号的"string"代表键为固定字符串"string"的对象,如果你要表达任意字符串键的对象,应该去掉引号写成Record<string, unknown>。

解决方案

根据你的实际业务需求二选一即可:

  • 如果你需要把接口返回的数组作为menu字段传入页面,直接修改getStaticProps的返回属性名:
export const getStaticProps: GetStaticProps<HomeProps> = async () => {
    const firstCategory = 0;
    const { data }: AxiosResponse<MenuItem[]> = await axios.post(
        process.env.NEXT_PUBLIC_DOMAIN + '/api/top-page/find',
        {
            firstCategory,
        }
    );
    return {
        props: {
            menu: data, // 把data改成menu,对应接口定义
            firstCategory,
        },
    };
};
  • 如果你确实需要保留data作为属性名,修改HomeProps的定义即可:
interface HomeProps extends Record<string, unknown> { // 同时修正了Record的参数错误
    data: MenuItem[];
    firstCategory: number;
}

内容的提问来源于stack exchange,提问作者Demian

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 21:36:05