React+TypeScript合并多个Context Provider及报错解决

你遇到的TS2559错误，本质是封装的组合Provider组件没有正确声明接受children属性的TypeScript类型，导致TS判定传入的children属性和组件固有属性不匹配。以下是实际开发中的标准处理方式：

1. 实现AppContextProvider.tsx #

在这个文件中组合所有需要抽离的Provider，同时明确定义组件的Props类型：

import { ReactNode } from 'react';
import { AuthenticationProvider } from './AuthenticationProvider';
import { SubscriptionsProvider } from './SubscriptionsProvider';
import { ResourceProvider } from './ResourceProvider';
import { ResourceAggregatesProvider } from './ResourceAggregatesProvider';

// 明确声明组件接受children属性
type AppContextProviderProps = {
  children: ReactNode;
};

export const AppContextProvider = ({ children }: AppContextProviderProps) => {
  return (
    <AuthenticationProvider>
      <SubscriptionsProvider>
        <ResourceProvider>
          <ResourceAggregatesProvider>
            {children}
          </ResourceAggregatesProvider>
        </ResourceProvider>
      </SubscriptionsProvider>
    </AuthenticationProvider>
  );
};

2. 简化App.tsx代码 #

现在可以直接使用封装好的AppContextProvider，让代码结构更清晰：

import { AppContextProvider } from './AppContextProvider';
// 导入ThemeProvider、Router等组件

function App() {
  const theme = // 你的主题初始化逻辑

  return (
    <>
      <AppContextProvider>
        <ThemeProvider theme={theme}>
          <Router>
            <main>
              <Routes>
                {/* 你的路由内容 */}
              </Routes>
            </main>
          </Router>
        </ThemeProvider>
      </AppContextProvider>
    </>
  );
}

export default App;

额外场景处理 #

如果某个内部Provider需要额外参数（比如ResourceProvider需要initialData），可以扩展AppContextProvider的Props类型，将参数透传进去：

// 扩展Props类型
type AppContextProviderProps = {
  children: ReactNode;
  initialResources?: Resource[]; // 替换为实际的资源类型
};

export const AppContextProvider = ({ children, initialResources }: AppContextProviderProps) => {
  return (
    <AuthenticationProvider>
      <SubscriptionsProvider>
        <ResourceProvider initialResources={initialResources}>
          <ResourceAggregatesProvider>
            {children}
          </ResourceAggregatesProvider>
        </ResourceProvider>
      </SubscriptionsProvider>
    </AuthenticationProvider>
  );
};

在App.tsx中使用时传入参数：

<AppContextProvider initialResources={myInitialResources}>
  {/* ... */}
</AppContextProvider>

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