typescript - 如何在带有 TypeScript 的 Next.js 中将 next-auth 与每页布局一起使用？

Question

我的当前代码如下，它遵循每页 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;

我不断收到错误 Property 'session' does not exist on type '{}'.ts on pageProps.session。我需要将 TypeScript 更改为什么才能使其正常工作？

Answer 1

您可以将泛型类型添加到 AppPropsWithLayout，然后在 MyApp 的 Prop 类型中使用它，并为 session 传递正确的类型.请注意，这仅适用于 Next.js 12.3 及更高版本，因为仅在 https://github.com/vercel/next.js/pull/38867 中添加了对通过 AppProps 键入 pageProps 的支持。 .

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

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

// Add generic type
type AppPropsWithLayout<P> = AppProps<P> & { 
    Component: NextPageWithLayout<P>; 
}; 

// Pass `{ session: Session; }` type as generic
function MyApp({ Component, pageProps }: AppPropsWithLayout<{ session: Session; }>) {
    const getLayout = Component.getLayout || ((page: any) => page);

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

顺便说一句，我会避免将 getLayout 包裹在 session 提供者周围，因为它可能会导致上下文出现问题。