如何使用 TypeScript 在 Next.js 中的每页布局中使用 next-auth？

Question

我当前的代码如下，它遵循 Next.js 每页getLayout的教程（请参阅 TypeScript 部分）和带有 TypeScript 的NextAuth（或者我应该说，尝试遵循...）：

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我不断收到错误pageProps.session。我需要将 TypeScript 更改为什么才能使其正常工作？

Answer 1

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

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会话提供程序，因为它可能会导致上下文问题。