Question

（NextAuth）类型错误：类型“{}”上不存在属性“session”

2022-09-09

22374

reactjs typescript next.js next-auth

我在 NextJs 项目上使用 NextAuth，并收到错误 “类型错误：类型‘{}’上不存在属性‘session’。” 。我按照此处的建议将 session 属性添加到我的 _app.tsx：

https://next-auth.js.org/getting-started/example

我还将该属性添加到我的自定义 MyApp 类型接口，但仍然收到错误。按照我的代码：

import { NextComponentType } from "next";
import { Session } from "next-auth";

export interface CustomAppProps extends AppProps {
  Component: NextComponentType & { auth?: boolean; session?: Session };
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
  //...
});

我该如何修复它？谢谢！

编辑 #1（使用我当前的代码添加 MyApp ）：

function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {

  return (
    <>
      <CookieConsentProvider useCookieConsentHooksOptions={{ consentCookieAttributes: { expires: 360 } }}>
        <SessionProvider session={session}>
          <AppContextProvider>
            <Component {...pageProps} />
          </AppContextProvider>
        </SessionProvider>
      </CookieConsentProvider>
    </>
  );
}

编辑 #2：

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <>
      <CookieConsentProvider useCookieConsentHooksOptions={{ consentCookieAttributes: { expires: 360 } }}>
        <SessionProvider session={pageProps.session}>
          <AppContextProvider>
            <Component {...pageProps} />
          </AppContextProvider>
        </SessionProvider>
      </CookieConsentProvider>
    </>
  );
}

使用上面的代码我仍然收到 TS 错误：

Answer 1

在最新版本的 next.js v12.3.0` 中， https://github.com/vercel/next.js/releases#:~:text=Compare-,v12.3.0,-Latest ，

接口 AppProps 采用 pageProps 的泛型，如此合并 PR 的详细信息所示（ https://github.com/vercel/next.js/pull/38867 ）

我遇到了同样的问题，并通过将会话类型传递给 AppProps 泛型解决了它。

注意：无需定义在这种情况下，用于类型声明的新自定义文件。

import { Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

function MyApp({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

Answer 2

我设法通过向我的项目添加自定义类型文件来修复该错误，正如我在 NexthAuth.js Github 存储库中看到的那样： https://github.com/nextauthjs/next-auth-typescript-example/blob/main/types/next.d.ts 。

import type { NextComponentType, NextPageContext } from "next"
import type { Session } from "next-auth"
import type { Router } from "next/router"

declare module "next/app" {
  type AppProps<P = Record<string, unknown>> = {
    Component: NextComponentType<NextPageContext, any, P>
    router: Router
    __N_SSG?: boolean
    __N_SSP?: boolean
    pageProps: P & {
      /** Initial session passed in from `getServerSideProps` or `getInitialProps` */
      session?: Session
    }
  }
}

只需将其复制到我的项目中，就可以正常工作。不确定为什么它以前可以工作，因为我以前从来没有这样做过。

Answer 3

要么你的类型定义错误，要么你的 prop 解构错误。

此类型定义与你的解构相匹配：

export interface CustomAppProps extends AppProps {
  Component: NextComponentType;
  pageProps: { auth?: boolean; session?: Session }
}