Next.js中getStaticProps的TypeScript类型定义相关技术问询

1. <IParams>泛型的定义及类型归属 #

<IParams>是GetStaticProps的泛型参数之一，它用于约束getStaticProps上下文对象中params的类型，属于函数的输入类型。

Next.js官方的GetStaticProps类型签名里，这个泛型参数对应继承自ParsedUrlQuery的Q，作用是确保context.params符合你定义的结构——在这个例子里就是必须包含string类型的id字段。

2. 指定<IParams>后是否需要Props接口？ #

不需要，自定义的Props接口完全是冗余的。

因为GetStaticProps的上下文类型GetStaticPropsContext<IParams>已经包含了正确的params类型约束，你可以直接用它来注解参数：

export const getStaticProps: GetStaticProps<IParams> = async ({ params: { id } }: GetStaticPropsContext<IParams>) => {
  // 逻辑代码
};

更简洁的是，TypeScript能通过GetStaticProps<IParams>自动推断出参数的类型，连注解都可以省掉：

export const getStaticProps: GetStaticProps<IParams> = async ({ params: { id } }) => {
  // id会被自动推断为string类型
};

3. getStaticProps的输出类型由什么定义？ #

输出类型由两部分决定：

• GetStaticProps的第二个泛型参数（可选），用于显式约束返回给页面组件的props类型
• 实际返回的props对象的结构，TypeScript会自动推断类型（如果没显式指定泛型参数）

在你的示例中，没有显式指定第二个泛型参数，TypeScript会根据return { props: { lesson } }自动推断出输出props的类型是包含lesson字段的对象（lesson的类型由supabase的查询结果决定）。如果要显式约束，可以这样写：

// 先定义页面接收的props类型
interface LessonPageProps {
  lesson: Lesson; // 假设Lesson是你预先定义的课程数据类型
}

// 传入第二个泛型参数约束输出
export const getStaticProps: GetStaticProps<IParams, LessonPageProps> = async ({ params: { id } }) => {
  const { data: lesson } = await supabase.from("lesson").select("*").eq("id", id).single();
  return { props: { lesson } };
};

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