如何在Next.js（TypeScript）中结合NextAuth与页面级布局？

我当前的代码遵循Next.js页面级getLayout布局（参考TypeScript章节）和NextAuth TypeScript相关规范，代码如下：

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import Header from "components/Header";
import { ReactElement, ReactNode } from "react";
import { NextPage } from "next";

type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout || ((page: any) => page);

  return getLayout(
    <SessionProvider session={pageProps.session}>
      <Header />
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

在pageProps.session处持续收到TypeScript错误提示：Property 'session' does not exist on type '{}'.ts，需要修改哪些TypeScript代码来解决这个问题？

要解决这个类型错误，核心是让TypeScript识别pageProps中可能存在session属性，具体修改如下：

• 扩展AppPropsWithLayout的pageProps类型
  修改AppPropsWithLayout定义，在原AppProps的pageProps基础上交叉添加可选的session字段：

  type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout;
    pageProps: AppProps["pageProps"] & {
      session?: Session;
    };
  };
  

  这样既保留了AppProps中原有的pageProps类型，又明确了它可能包含session属性，类型对应NextAuth的Session类型。

• 可选方案：修改NextPageWithLayout的默认props类型
  你也可以直接给页面组件的默认props类型加上session：

  type NextPageWithLayout<P = { session?: Session }, IP = P> = NextPage<P, IP> & {
    getLayout?: (page: ReactElement) => ReactNode;
  };
  

  不过更推荐第一种方式，因为pageProps是由AppProps传递而来，直接扩展AppPropsWithLayout里的pageProps更贴合Next.js的类型体系。

修改完成后，TypeScript就能正确识别pageProps.session的存在，错误提示会自动消失。

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