React+TypeScript中Mobx注入Store遇类型错误，如何解决？

这个问题的核心是TypeScript无法识别Mobx inject高阶组件通过React Context注入props的运行时行为，所以它会严格按照你定义的组件props类型要求显式传入rootStore。下面是两种可靠的解决方案：

方案一：使用mobx-react的InjectedProps类型（推荐） #

mobx-react提供了InjectedProps工具类型，可以帮我们自动处理注入props的类型声明，让TypeScript正确识别哪些props是由inject提供的：

1. 首先导入相关类型：

import { inject, observer, InjectedProps } from 'mobx-react';
import RootStore from './Store';

2. 重新定义App组件的props类型：

// 定义组件自身需要的props（如果没有自定义props，就用空对象{}）
type AppOwnProps = {};

// 组合自身props和注入的rootStore props
type AppProps = AppOwnProps & InjectedProps<{ rootStore: typeof RootStore.Type }>;

const App = ({ rootStore }: AppProps) => <Wrapper> Content </Wrapper>;

// 正常导出注入后的组件
export default inject('rootStore')(observer(App));

方案二：手动声明高阶组件后的组件类型 #

如果你不想依赖InjectedProps，可以手动调整组件的导出类型，明确告诉TypeScript：经过inject包裹后的组件不需要显式传入rootStore：

import { inject, observer } from 'mobx-react';
import RootStore from './Store';
import React from 'react';

// 组件自身的props（无自定义props则为空对象）
type AppOwnProps = {};

// 组件内部接收的完整props（自身+注入）
type AppInternalProps = AppOwnProps & { rootStore: typeof RootStore.Type };

const App = ({ rootStore }: AppInternalProps) => <Wrapper> Content </Wrapper>;

// 导出时，将组件类型声明为只接收自身props
export default inject('rootStore')(observer(App)) as React.FC<AppOwnProps>;

为什么这两种方法有效？ #

TypeScript是静态类型检查工具，它无法追踪inject在运行时通过Context注入props的逻辑。通过上述方式，我们要么用官方提供的类型工具明确标记注入的props，要么手动覆盖组件的对外类型声明，让TypeScript知道：当你使用<App/>时，rootStore已经由Provider提供，不需要再显式传入。

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