Typescript环境下Redux <Provider>标签无法添加子元素求助

问题场景 #

在TypeScript项目中使用Redux的<Provider>包裹子组件时出现类型错误，无法正常渲染内部元素。相关代码及依赖情况如下：

代码片段 #

import React from "react";
import { Provider } from "react-redux";
import { store } from "../state";
import RepositoriesList from "./RepositoriesList";

function App() {
  return (
    <Provider store={store}>
      <div>
        <h1>Search for a Package</h1>
        <RepositoriesList />
      </div>
    </Provider>
  );
}

export default App;

依赖情况 #

从package.json截图可知，项目使用的react-redux及相关TypeScript依赖版本可能存在兼容性问题。

可行解决办法 #

1. 对齐react-redux与@types/react-redux版本 #

类型定义包与核心库版本不匹配是这类错误的常见原因。先卸载现有类型包，再安装与当前react-redux版本适配的类型包：

npm uninstall @types/react-redux
npm install @types/react-redux@匹配你的react-redux版本号 --save-dev

比如你的react-redux是7.2.8，就安装@types/react-redux@^7.2.0。

2. 升级react-redux到最新稳定版 #

旧版本react-redux的TypeScript类型定义存在children属性的类型缺陷，升级到最新版可直接解决该问题：

npm update react-redux

3. 显式声明Provider属性（临时方案） #

如果暂时无法升级依赖，可以通过显式定义Provider的props来绕过类型检查：

import React from "react";
import { Provider, ProviderProps } from "react-redux";
import { store } from "../state";
import RepositoriesList from "./RepositoriesList";

function App() {
  const providerProps: ProviderProps<typeof store> = {
    store,
    children: (
      <div>
        <h1>Search for a Package</h1>
        <RepositoriesList />
      </div>
    )
  };
  
  return <Provider {...providerProps} />;
}

export default App;

4. 检查TypeScript配置 #

确保tsconfig.json的JSX模式和相关配置正确，示例配置：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

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