如何修复Next.js中使用InferGetStaticPropsType时的getStaticProps类型错误

核心问题定位 #

你大概率是用错了类型推断的来源：InferGetStaticPropsType需要传入getStaticProps的类型，而不是getStaticPaths——后者只负责生成路由路径，不定义页面props的类型。这直接导致props被推断为never，自然无法访问body属性。

具体修复步骤 #

1. 纠正类型推断的引用

把：

type Props = InferGetStaticPropsType<typeof getStaticPaths>;

改成：

type Props = InferGetStaticPropsType<typeof getStaticProps>;

2. 让TypeScript正确推断post的类型

确保getStaticProps里的逻辑能让TypeScript确认post一定是Post类型，而非undefined或模糊类型：

// 先定义基础类型
interface Post {
  slug: string;
  body: string;
  // 其他字段
}

interface IParams {
  slug: string;
}

// getStaticPaths 保持正常逻辑
export const getStaticPaths: GetStaticPaths<IParams> = async () => {
  const allPosts: Post[] = [/* 你的数据源 */];
  const paths = allPosts.map(post => ({
    params: { slug: post.slug }
  }));

  return { paths, fallback: false };
};

// getStaticProps 中处理空值，让TS确认post非空
export const getStaticProps: GetStaticProps<{ post: Post }, IParams> = async ({ params }) => {
  const allPosts: Post[] = [/* 你的数据源 */];
  const post = allPosts.find(p => p.slug === params?.slug);

  // 必须处理找不到post的情况，触发404
  if (!post) {
    return { notFound: true };
  }

  // 此时TS会自动推断post为Post类型，无需额外断言
  return {
    props: { post }
  };
};

3. 组件中使用正确的类型

import { InferGetStaticPropsType } from 'next';

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export default function PostPage({ post }: Props) {
  // 现在访问post.body不会再触发类型错误
  return <div>{post.body}</div>;
}

额外注意点 #

• 不要随意用as Post做强制类型断言，除非你100%确认数据结构匹配——强制断言会跳过TypeScript的类型检查，可能埋下运行时隐患。
• 如果fallback设为true或blocking，需要额外处理params可能为undefined的情况，避免find逻辑出错。

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