React Context作为Props传递的TypeScript类型错误排查

问题场景 #

需要将React Context作为props传递给深层嵌套的通用组件，该组件不关心Context的具体类型，只需其实现必要字段。组件与父组件代码如下，但父组件中出现类型错误。

组件定义 #

interface RequiredFilterContext { ... };

interface Props<C extends RequiredFilterContext> { 
 context: React.Context<C>;
}

const Filters = <C>({context}: Props) => { ... };

父组件代码 #

interface ParentContext extends RequiredFilterContext { ... };

const parentContext = React.createContext({} as ParentContext);

const Parent = () => {
 return <Filters context={parentContext} />
};

错误提示 #

Type Context is not assignable to type Context
The types of Provider.propTypes are incompatible between these types.

解决方法 #

这个错误源于TypeScript的逆变特性：React.Context的类型是逆变的，即便ParentContext继承了RequiredFilterContext，Context<ParentContext>也无法直接赋值给Context<RequiredFilterContext>。以下是几种可行的解决方式：

方式1：放宽Props的类型约束 #

修改Props定义，让Context接受更宽泛的类型范围：

interface Props<C extends RequiredFilterContext> { 
  context: React.Context<Partial<C>>;
}

如果通用组件不需要访问子类型的独有字段，也可以直接将Context类型改为React.Context<RequiredFilterContext>，但会丢失子类型的额外字段类型提示。

方式2：使用类型断言 #

在父组件传递props时，显式声明类型兼容性：

const Parent = () => {
 return <Filters context={parentContext as React.Context<RequiredFilterContext>} />
};

这种方式简单直接，但要确保ParentContext完全实现了RequiredFilterContext的所有字段，避免运行时错误。

方式3：重构组件结构（推荐） #

改用高阶组件（HOC）或Render Props封装Context消费逻辑，让通用组件无需接收Context本身：

const withFilterContext = <C extends RequiredFilterContext>(Context: React.Context<C>) => {
  return (Component: React.ComponentType<{ contextValue: C }>) => {
    return () => {
      const value = React.useContext(Context);
      return <Component contextValue={value} />;
    };
  };
};

// 使用示例
const FilterWithContext = withFilterContext(parentContext)(Filters);

这种方式既规避了类型兼容性问题，也更符合React的设计模式。

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