NextJS两种getStaticProps写法的TypeScript报错差异及修正方法

我正在学习NextJS课程，想用TypeScript配合开发。查了GitHub讨论区还是搞不懂，为什么下面第一个函数报错，第二个却没问题？

报错的写法 #

export async function getStaticProps(): GetStaticProps {
    return {
        props: {
            example:  ""
        }
    }
}

报错信息：

该异步函数或方法的返回类型必须是全局Promise类型。是否想要写成'Promise<GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery, PreviewData>>'？

正常的写法 #

export const getStaticProps: GetStaticProps = async () => {
    return {
        props: {
            example: ""
        }
    }
};

问题出在哪？ #

这俩写法根本不是等价的，核心差异在类型标注的对象不同：

1. 第一个写法是给函数的返回值标类型，但你标了GetStaticProps——这本身是一个函数类型（Next.js定义的符合要求的getStaticProps函数的类型），而异步函数的返回值必须是Promise包裹的对象，类型完全不匹配，所以报错。
2. 第二个写法是给整个函数标类型，GetStaticProps本身就定义了“这是一个返回Promise<{ props: ... }>的函数”，TypeScript会自动适配异步函数的Promise包装逻辑，所以类型完全匹配，不会报错。

怎么修复第一个函数？ #

你需要把返回类型改成Promise包裹的、符合getStaticProps要求的返回对象类型，最简单的写法是用ReturnType推导：

import { GetStaticProps } from 'next';

export async function getStaticProps(): Promise<ReturnType<GetStaticProps>> {
    return {
        props: {
            example:  ""
        }
    }
}

如果想更精准地定义页面props的类型，可以用GetStaticPropsResult：

import { GetStaticProps, GetStaticPropsResult } from 'next';

// 定义页面接收的props类型
type PageProps = {
  example: string;
};

export async function getStaticProps(): Promise<GetStaticPropsResult<PageProps>> {
    return {
        props: {
            example:  ""
        }
    }
}

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