我正在使用 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>
</>
);
}
我不是打字稿專家，所以我的問題是如何將該auth屬性添加/擴展到帶有 TS 的組件？
uj5u.com熱心網友回復：
您需要擴展AppProp您的自定義屬性
import type { NextComponentType } from 'next' //Import Component type
//Add custom auth type with using union in type
type CustomAppProps = AppProps & {
Component: NextComponentType & {auth?: boolean}
}
function MyApp({ Component, pageProps: { session, ...pageProps } }: CustomAppProps) {
...
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/407276.html
標籤：