NextJS TypeScript中如何为pageProps添加dehydratedState类型？

问题原因 #

pageProps 默认类型为 {}，TypeScript 无法识别新增的 dehydratedState 属性，因此抛出类型不存在的错误。

修复步骤 #

1. 导入官方类型
   从 TanStack Query 导入官方提供的 DehydratedState 类型，替代 any 来获得类型安全：

   import { DehydratedState } from '@tanstack/react-query';
   

2. 定义自定义 pageProps 类型
   扩展默认的 pageProps 类型，添加 dehydratedState 字段：

   // 合并默认pageProps类型与自定义字段
   type CustomPageProps = AppProps['pageProps'] & {
     dehydratedState?: DehydratedState;
   };
   

3. 更新 CustomAppProps 接口
   在自定义的 CustomAppProps 中指定 pageProps 的类型为我们刚定义的 CustomPageProps：

   interface CustomAppProps extends Omit<AppProps, "Component" | "pageProps"> {
     Component: CustomPage;
     emotionCache?: EmotionCache;
     pageProps: CustomPageProps;
   }
   

完整修改后的关键代码片段 #

import { DehydratedState, QueryClient, QueryClientProvider, Hydrate } from '@tanstack/react-query';
import type { AppProps, NextPage } from 'next';
// 其他导入...

const clientSideEmotionCache = createEmotionCache();

type CustomPage = NextPage & {
  requiresAuth?: boolean;
  redirectUnauthenticatedTo?: string;
};

// 自定义pageProps类型，包含dehydratedState
type CustomPageProps = AppProps['pageProps'] & {
  dehydratedState?: DehydratedState;
};

interface CustomAppProps extends Omit<AppProps, "Component" | "pageProps"> {
  Component: CustomPage;
  emotionCache?: EmotionCache;
  pageProps: CustomPageProps;
}

type ThemeMode = "light" | "dark";

const reactQueryConfig = {
  defaultOptions: {
    queries: {
      staleTime: 1 * 60 * 60 * 1000,
      cacheTime: 5 * 60 * 60 * 1000,
      refetchOnWindowFocus: false
    }
  }
}

export default function MyApp(props: CustomAppProps) {
  console.log("MyApp Rendered");

  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  const [queryClient] = useState(() => new QueryClient(reactQueryConfig))
  // 修正theme参数问题，通过状态管理或props传入，这里设默认值示例
  const [theme, setTheme] = useState<ThemeMode>('light');

  return (
    <>
      <CacheProvider value={emotionCache}>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <ThemeModeProvider theme={theme}>
          <CssBaseline />
          <QueryClientProvider client={queryClient}>
            <Provider store={store}>
              <Hydrate state={pageProps.dehydratedState}>
                <AuthProvider>
                  <Layout>
                    <Component {...pageProps} />
                    <ToastContainer position='top-center' hideProgressBar />
                  </Layout>
                </AuthProvider>
              </Hydrate>
            </Provider>
          </QueryClientProvider>
        </ThemeModeProvider>
      </CacheProvider>
    </>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};

额外说明 #

• 不要将 dehydratedState 定义在 CustomPage 类型中，它是页面props的一部分，而非页面组件本身的属性。
• 使用官方的 DehydratedState 类型可以获得完整的类型提示，避免使用 any 带来的类型不安全问题。

内容的提问来源于stack exchange，提问作者adc 9