Next.js项目中NextAuth SessionProvider提示session属性不存在求助

• 原因分析：Next.js自带的AppProps类型未包含pageProps.session的定义，TypeScript无法识别该属性，因此抛出类型错误。

• 解决方案1：扩展AppProps类型
  手动为pageProps添加session属性的类型定义，代码如下：

  import { SessionProvider } from 'next-auth/react';
  import { AppProps } from 'next/app';
  import type { Session } from 'next-auth';
  
  // 扩展AppProps，为pageProps添加session属性
  type CustomAppProps = AppProps & {
    pageProps: {
      session?: Session;
    };
  };
  
  const App = ({ Component, pageProps }: CustomAppProps) => {
    return (
      <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
      </SessionProvider>
    );
  };
  
  export default App;
  

• 解决方案2：使用NextAuth提供的专属类型
  NextAuth提供了适配App组件的类型，直接导入使用即可：

  import { SessionProvider } from 'next-auth/react';
  import type { AppProps as NextAuthAppProps } from 'next-auth/react';
  
  const App = ({ Component, pageProps }: NextAuthAppProps) => {
    return (
      <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
      </SessionProvider>
    );
  };
  
  export default App;
  

• 解决方案3：临时类型断言（不推荐生产环境使用）
  如果只是临时绕过类型检查，可以用类型断言强制指定pageProps包含session：

  import { SessionProvider } from 'next-auth/react';
  import { AppProps } from 'next/app';
  
  const App = ({ Component, pageProps }: AppProps) => {
    return (
      <SessionProvider session={(pageProps as { session?: any }).session}>
        <Component {...pageProps} />
      </SessionProvider>
    );
  };
  
  export default App;
  

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