从Next.js迁移到Vite.js时自定义App组件的TypeScript类型错误

数据老陈

2026-7-17

解决方案

核心问题原因

你使用的AppProps<CustomPageProps>是Next.js专属类型，它依赖Next的路由机制自动注入pageProps，但Vite没有这套逻辑，直接在Vite的main.tsx中使用Next风格的App组件时，无法满足必填的pageProps参数要求。

具体修复步骤

1. 替换Next.js的专属类型定义

在pages/_app.tsx中，弃用Next的AppProps，自定义适配Vite的组件类型：

import React from 'react';

// 自定义App组件Props类型，替代Next的AppProps
type ViteAppProps<CP = {}> = {
  Component: React.ComponentType<CP>;
  // 将pageProps设为可选，或根据业务需求设置默认值
  pageProps?: CP;
};

function App({ Component, pageProps = {} }: ViteAppProps<CustomPageProps>) {
  return <Component {...pageProps} />;
}

export default App;

2. 在main.tsx中手动传递props

Vite没有自动注入pageProps的机制，需要手动传入页面组件和初始props：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './pages/_app';
// 导入你的首页组件（对应原Next项目的pages/index.tsx）
import Home from './pages/index';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    {/* 按需传递Component和pageProps，空对象可根据页面需求替换为实际初始数据 */}
    <App Component={Home} pageProps={{}} />
  </React.StrictMode>,
);