React Router页面组件传props报TS2322错误的原因与解法

触发报错的根本原因 #

这个报错和路由匹配逻辑没有直接关联，核心是TypeScript在解析App组件的可传props类型时，没有正确读取到AppProps接口中的字段定义，最终推导出的组件允许传参类型是仅包含通用固有属性的空对象结构，传入baseApiUrl时自然会被判定为非法属性。
常见的触发场景包括：

• 自定义库导出组件时，仅导出了App函数组件本身，没有同步导出对应的AppProps类型，加上库的TS配置开启isolatedModules后，跨模块导入时函数入参的类型会被擦除，最终解析到的props类型是空对象。
• 依赖版本不兼容：react-router-dom 5.2.0的内置类型定义是基于react 17版本的@types/react规则编写的，如果搭配react 18及以上版本的@types/react使用，后者调整了全局JSX命名空间的解析逻辑，会直接导致组件props类型推导失效。

IntrinsicAttributes类型的来源 #

IntrinsicAttributes是@types/react内置在全局JSX命名空间里的公共属性集合，存储的是所有JSX标签都默认支持的通用属性，比如key、ref这类和组件业务逻辑无关的全局参数。
TS在执行JSX类型检查时，会自动将组件自身定义的props类型和IntrinsicAttributes做交叉组合，生成最终允许传递给组件的完整props类型。正常情况下App组件的可传类型应该是IntrinsicAttributes & AppProps，也就是通用属性加上自定义业务属性，这个组合是JSX类型检查的标准流程，不属于异常类型。本次报错中出现的这个类型之所以没有baseApiUrl字段，本质是交叉组合前的AppProps被解析成了空对象，才会抛出属性不存在的提示。

代码调整方案 #

按以下步骤排查调整即可通过TS校验：

• 自定义库导出组件时，将AppProps接口和App组件一起导出，不要只导出函数组件本身，避免跨模块导入时类型解析失效。
• 对齐依赖版本：使用react-router-dom 5.2.0时，将@types/react版本锁定为17.x系列，和库的类型定义保持兼容，避免react 18版本的JSX规则调整导致的类型推导问题。
• 简化组件的类型标注：不需要显式标注返回值为React.ReactElement<AppProps>，可以直接去掉返回值的显式标注，让TS通过函数入参自行推断组件类型；如果需要显式标注，使用标准的React.FC<AppProps>写法即可，避免因为ReactElement泛型参数位置错误导致的类型识别偏差。
• 检查项目tsconfig的paths配置，确保自定义库的类型声明路径正确指向编译后的.d.ts文件，不要错误指向js文件导致类型读取失败。

额外注意：不要使用Route组件的component属性传递带自定义props的组件，这个属性的类型定义要求组件完全匹配路由注入的参数类型，无法直接接收自定义业务参数；如果需要渲染带自定义参数的路由组件，直接将组件作为Route的children嵌套写入即可，和当前代码的写法一致。

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