在Next.js中如何给带props的页面组件做TypeScript类型标注

Next.js 提供的NextPage类型默认泛型参数为空，对应的组件 props 仅包含可选的children属性，没有包含你通过getServerSideProps注入的events属性，因此 TypeScript 会抛出属性不存在的报错。

你只需要为NextPage传入自定义的 props 类型泛型即可，同时可以给GetServerSideProps也传入相同的泛型，保证服务端返回的 props 和组件要求的类型自动对齐校验。

修改后的完整代码 #

import type { NextPage } from 'next';
import { GetServerSideProps } from 'next';
import axios from '../lib/axios';

import { Event } from '../ts/interfaces';

// 定义Home组件接收的Props类型
type HomeProps = {
  events: Event[];
};

// 给NextPage传入泛型指定props类型
const Home: NextPage<HomeProps> = ({ events }) => {
  return (
    <div>
      {events.map((event: Event) => (
        <div key={event.title}>{event.title}</div>
      ))}
    </div>
  );
};

// 给GetServerSideProps传入相同泛型，自动校验返回的props类型
export const getServerSideProps: GetServerSideProps<HomeProps> = async () => {
  const res = await axios.get<Event[]>(`${process.env.API_URL}/events`);

  return {
    props: { events: res.data },
  };
};

export default Home;

• 如果你不需要复用props类型，也可以直接把类型写在泛型内：const Home: NextPage<{ events: Event[] }> = ({ events }) => {
• 如果你使用的是 Next.js 13+ 的 App Router，不需要使用NextPage类型，直接给组件参数标注类型即可：

export default function Home({ events }: { events: Event[] }) {
  // 组件逻辑
}

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