reactjs - 我如何在 Next.js 的 _app.tsx 中使用 Typescript 為 Component 添加一個新屬性？

我正在使用 Next.js、NextAuth.js 和 Typescript 開發一些受保護的頁面。下面這段來自我的 _app.tsx 的程式碼是從 NextAuth.js 官方網站取得的，但其中包含了一個 auth 屬性，而 Component 並不存在該屬性，其類型為 var Component: NextComponentType<NextPageContext, any, {}>，因此 TS 對此顯示錯誤：

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

我不是 TypeScript 專家，所以我的問題是我該如何在 TypeScript 中向 Component 添加/擴展 auth 屬性？

答案＃1

你需要擴展 AppProp 並添加你的自定義屬性

import type { NextComponentType  } from 'next' //Import Component type

//Add custom appProp type then use union to add it
type CustomAppProps = AppProps & {
  Component: NextComponentType & {auth?: boolean} // add auth type
}

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