如何以函数声明方式正确为Next.js getServerSideProps添加类型

你的核心问题是返回类型标注错误：你把getServerSideProps的返回类型写成了Promise<GetServerSideProps<Data>>，但GetServerSideProps<T>本身是一个函数类型，不是该函数实际要返回的对象结构类型，这导致InferGetServerSidePropsType无法正确推断props的类型，最终得到never。

正确的函数声明写法 #

直接用Next.js提供的GetServerSidePropsResult<T>标注返回值类型，它涵盖了getServerSideProps所有合法的返回结构（包括props、redirect、notFound）：

import { GetServerSidePropsContext, GetServerSidePropsResult, InferGetServerSidePropsType } from 'next';

export type Data = {
    example: string;
};

// 函数声明式的getServerSideProps，类型标注正确
export async function getServerSideProps(
    context: GetServerSidePropsContext
): Promise<GetServerSidePropsResult<Data>> {
    const data: Data = { example: '测试内容' };
    // 这里可以添加数据获取逻辑
    return {
        props: data
    };
}

// 组件可以正确推断props类型
export default function ExampleComponent(
    data: InferGetServerSidePropsType<typeof getServerSideProps>
) {
    return <p>{data.example}</p>;
}

为什么之前的写法会出错？ #

你之前的返回类型Promise<GetServerSideProps<Data>>是完全错误的：

• GetServerSideProps<T>的本质是一个函数类型：(context: GetServerSidePropsContext) => Promise<GetServerSidePropsResult<T>>
• 你把函数类型当成了返回值类型，导致TypeScript无法识别返回的{ props: data }和Data类型的关联，最终InferGetServerSidePropsType只能推断出never，自然访问data.example会报错。

另一种更简洁的写法（利用类型推断） #

如果不想手动标注返回类型，也可以让TypeScript自动推断，但需要确保返回的props严格符合Data类型：

import { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';

export type Data = {
    example: string;
};

export async function getServerSideProps(context: GetServerSidePropsContext) {
    const data: Data = { example: '测试内容' };
    return {
        props: data // TypeScript会自动推断返回值类型为Promise<{ props: Data }>
    };
}

export default function ExampleComponent(
    data: InferGetServerSidePropsType<typeof getServerSideProps>
) {
    return <p>{data.example}</p>;
}

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