@types/react@18导致react-redux Provider无children属性的修复求助

问题根源 #

升级@types/react@18后，React.FC不再默认包含children属性，而旧版本react-redux的Provider类型定义未适配这一变化，导致传递children时出现类型报错。

解决方法 #

1. 升级react-redux到适配React 18的版本（推荐） #

react-redux v8及以上版本完全适配React 18的类型系统，直接升级即可解决问题：

npm install react-redux@latest
# 或者用yarn
yarn add react-redux@latest

升级后无需额外修改Wrapper代码，原写法即可正常工作。

2. 不升级react-redux时的临时修复 #

如果暂时无法升级依赖，可通过以下方式调整类型定义：

方式一：扩展Provider的Props类型

import React from 'react';
import { Provider, ProviderProps } from 'react-redux';
import store from './store/index';

// 扩展ProviderProps，显式添加children属性
type StoreWrapperProps = ProviderProps<typeof store> & {
  children: React.ReactNode;
};

const StoreWrapper = ({ children, ...props }: StoreWrapperProps) => {
  return <Provider {...props}>{children}</Provider>;
};

export default StoreWrapper;

方式二：直接使用函数组件（不依赖React.FC）

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/index';

// 直接定义组件props，不使用React.FC
const StoreWrapper = ({ children }: { children?: React.ReactNode }) => {
  // 给Provider的children做类型断言
  return <Provider store={store}>{children as React.ReactNode}</Provider>;
};

export default StoreWrapper;

3. 检查tsconfig.json配置 #

确保tsconfig.json中的JSX配置符合React 18要求：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es5"
  }
}

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