NextJS 13项目TypeScript类型错误排查与修复求助

错误1：Property 'ctx' does not exist on type 'Props1' #

初始代码里的Props1错误继承了NextPageContext，但App.getInitialProps的参数实际是包含Component和ctx的对象，并非NextPageContext的子类。NextPageContext本身没有ctx字段，所以TypeScript会报错找不到该属性。

错误2：Expected 1 arguments, but got 3 #

NextComponentType默认的getInitialProps仅接受一个NextPageContext参数，你传递了三个参数（ctx、client、currentUser），TypeScript严格校验参数数量，因此触发报错。

完整修复代码 #

import "bootstrap/dist/css/bootstrap.css";
import { AppProps, AppContext } from "next/app";
import { NextPageContext } from "next";
import buildClient from "../api/build-client";
import Header from "../components/header";
import { User } from "../types/types";

// 自定义页面组件类型，扩展getInitialProps的参数规则
type PageComponent<P = {}, IP = P> = React.ComponentType<P> & {
  getInitialProps?: (
    ctx: NextPageContext,
    client: ReturnType<typeof buildClient>,
    currentUser: User | null
  ) => Promise<IP>;
};

interface Props extends AppProps {
  currentUser: User;
}

const AppComponent = ({ Component, pageProps, currentUser }: Props) => {
  return (
    <div>
      <Header currentUser={currentUser} />
      <div className="container">
        <Component currentUser={currentUser} {...pageProps} />
      </div>
    </div>
  );
};

// 用内置AppContext类型，交叉自定义页面组件类型确保类型兼容
AppComponent.getInitialProps = async (appContext: AppContext & { Component: PageComponent }) => {
  const client = buildClient(appContext.ctx);
  const { data } = await client.get("/api/users/currentuser");

  let pageProps = {};
  if (appContext.Component.getInitialProps) {
    pageProps = await appContext.Component.getInitialProps(
      appContext.ctx,
      client,
      data.currentUser
    );
  }

  return {
    pageProps,
    ...data,
  };
};

export default AppComponent;

关键修复点说明 #

1. 修正getInitialProps参数类型：

   • 直接使用Next.js内置的AppContext类型（从next/app导入），它原生包含ctx和Component字段，无需自行定义AppContextType。
   • 通过交叉类型AppContext & { Component: PageComponent }，让TypeScript识别页面组件的getInitialProps支持自定义参数。

2. 自定义页面组件类型：

   • 定义PageComponent类型，明确getInitialProps接受三个参数，消除参数数量不匹配的类型报错。

3. 类型安全传递参数：

   • 调用appContext.Component.getInitialProps时，三个参数会被TypeScript正确校验，保证类型一致性。

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