Next.js中用TypeScript编写getStaticProps遇类型及导出问题求助

一、先确认路由环境 #

如果你的页面在app/目录下（Next.js 13+ App Router），getStaticProps不被支持，必须迁移到pages/目录下使用Page Router，或者改用App Router的静态生成方案（比如generateStaticParams配合静态组件）。这是第二个错误的常见触发原因。

二、Page Router下的正确类型写法 #

1. 函数声明式的正确写法 #

GetStaticProps是一个泛型函数类型，需通过泛型参数指定返回的props类型，而非将它作为函数的返回值类型。正确示例：

import { Movie } from './movies/movie'
import { GetStaticProps } from 'next'

// 定义页面接收的props类型
type PageProps = {
  movies: Movie[]
}

// 用ReturnType工具类型获取GetStaticProps的返回值类型
export async function getStaticProps(): Promise<ReturnType<GetStaticProps<PageProps>>> {
  const res = await fetch('https://my-json-server.typicode.com/horizon-code-academy/fake-movies-api/movies');
  const movies: Movie[] = await res.json()

  return {
    props: { movies }
  };
}

2. 箭头函数式的正确写法 #

若使用箭头函数，必须给GetStaticProps指定泛型参数，让TypeScript正确识别函数类型：

import { Movie } from './movies/movie'
import { GetStaticProps } from 'next'

type PageProps = {
  movies: Movie[]
}

export const getStaticProps: GetStaticProps<PageProps> = async () => {
  const res = await fetch('https://my-json-server.typicode.com/horizon-code-academy/fake-movies-api/movies');
  const movies: Movie[] = await res.json()

  return {
    props: { movies }
  };
}

三、错误原因解析 #

• 第一个类型错误：你将GetStaticProps当作了函数的返回值类型，但它本质是函数本身的类型，不是返回值类型。正确的返回值类型是Promise<{ props: PageProps } | { redirect: ... } | { notFound: boolean }>，用ReturnType<GetStaticProps<PageProps>>可快速获取该类型。
• 第二个导出错误：若在Page Router下出现此提示，大概率是未指定泛型参数，导致TypeScript无法推断出这是符合Next.js要求的getStaticProps函数；同时要确保文件位于pages/目录下，且是合法的页面组件文件（比如pages/index.tsx）。

额外注意事项 #

• 确保Movie类型定义与接口返回的JSON结构完全匹配，避免类型推断冲突。
• Next.js 13+ App Router下无getStaticPropsAPI，需改用generateStaticParams实现静态路由生成，组件默认静态渲染。

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