React+Redux Toolkit集成OidcProvider遇TS类型错误求助

问题描述 #

在React+Redux Toolkit项目的index.tsx中添加OidcProvider时触发TypeScript错误TS2769，提示children属性不存在于OidcProvider的属性类型中。相同代码在其他项目可正常运行，仅依赖版本不同，同步依赖版本后问题仍未解决。

相关代码片段 #

index.tsx #

root.render(
    <Provider store={store}>
        <OidcProvider store={store} userManager={userManager}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </OidcProvider>
    </Provider>,
)

错误信息 #

TS2769: No overload matches this call.  
  Overload 1 of 2, '(props: OidcProviderProps<CombinedState<{ oidc: UserState; notify: INotifys; }>> | Readonly<OidcProviderProps<CombinedState<{ oidc: UserState; notify: INotifys; }>>>): OidcProvider<...>', gave the following error.  
    Type '{ children: Element; store: ToolkitStore<CombinedState<{ oidc: UserState; notify: INotifys; }>, AnyAction | Action<User | Error>, [...]>; userManager: UserManager; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<CombinedState<{ oidc: UserState; notify: INotifys; }>>> & Readonly<...>'.  
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<CombinedState<{ oidc: UserState; notify: INotifys; }>>> & Readonly<...>'.  
  Overload 2 of 2, '(props: OidcProviderProps<CombinedState<{ oidc: UserState; notify: INotifys; }>>, context: any): OidcProvider<CombinedState<{ oidc: UserState; notify: INotifys; }>>', gave the following error.  
    Type '{ children: Element; store: ToolkitStore<CombinedState<{ oidc: UserState; notify: INotifys; }>, AnyAction | Action<User | Error>, [...]>; userManager: UserManager; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<CombinedState<{ oidc: UserState; notify: INotifys; }>>> & Readonly<...>'.  
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<OidcProvider<CombinedState<{ oidc: UserState; notify: INotifys; }>>> & Readonly<...>'.

store.ts #

import {configureStore} from "@reduxjs/toolkit"
import {loadUser} from "redux-oidc"

import {rootReducer} from "./rootReducer"
import {userManager} from "../config/userManager"

const loadUserDefault = () => {
    userManager
        .clearStaleState()
        .then(() => loadUser(store, userManager))
        .catch((err) => console.error(err))
}

export function customConfigureStore() {
    const store = configureStore({
        reducer: rootReducer,
    })

    loadUserDefault()

    return store
}

export const store = customConfigureStore()

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

userManager.ts #

import {
    UserManager,
    UserManagerSettings,
    WebStorageStateStore,
} from "oidc-client"

import {pathsList} from "./pathList"

const uri = `${window.location.protocol}//${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ""
}`

const userManagerConfig: UserManagerSettings = {
    /**
     other my code
    **/
    loadUserInfo: true,
    userStore: new WebStorageStateStore({store: localStorage}),

    includeIdTokenInSilentRenew: true,
    monitorSession: false,
}

export const userManager = new UserManager(userManagerConfig)

package.json依赖 #

{
    "@reduxjs/toolkit": "^1.9.2",
    "antd": "^5.2.1",
    "axios": "^1.3.2",
    "oidc-client": "^1.11.5",
    "postcss": "^8.4.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.43.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.8.1",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-oidc": "^4.0.0-beta1",
    "redux-thunk": "^2.4.2"
}

可能的原因及解决方案 #

1. redux-oidc beta版本的类型定义缺陷 #

你使用的redux-oidc是4.0.0-beta1，这个beta版本的TypeScript类型定义大概率漏掉了children属性的声明，导致类型检查报错。

解决办法：

• 降级到redux-oidc稳定版本（如3.1.2），稳定版的类型定义通常更完善；
• 手动补充类型声明：创建types/redux-oidc.d.ts文件，内容如下：

import { OidcProviderProps as OriginalOidcProviderProps } from 'redux-oidc';
import { ReactNode } from 'react';

declare module 'redux-oidc' {
    interface OidcProviderProps<T> extends OriginalOidcProviderProps<T> {
        children: ReactNode;
    }
}

之后在tsconfig.json中确保该类型文件被包含。

2. React 18与redux-oidc的兼容性问题 #

React 18的类型系统有更新，而redux-oidc的beta版本可能未适配React 18的类型要求，导致children属性的类型推断失败。

解决办法：

• 查看redux-oidc官方文档确认是否支持React 18，若不支持，可降级React到17版本，或等待redux-oidc正式版本更新。

3. TypeScript配置差异 #

两个项目的tsconfig.json可能存在配置差异，比如strict模式开启状态、jsx选项设置等，这些会影响类型检查的严格程度。

解决办法：

• 对比正常项目的tsconfig.json，重点检查strict、jsx、lib等配置项，将当前项目配置调整为一致。

4. 依赖缓存问题 #

即使同步了依赖版本，本地node_modules缓存可能导致实际安装的依赖版本不一致，或类型定义文件未正确更新。

解决办法：

• 删除node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install或yarn install，确保依赖完全重新安装。

内容的提问来源于stack exchange，提问作者Михаил Козырев