TypeScript React扩展带静态组件的React.FC时如何消除TS(2339)错误

架构老林

2026-10-3

错误原因

你报错的本质原因是GridProps是Grid组件接收的入参的类型定义，用来约束你写<Grid xxx />时传入的xxx属性，而你现在的报错是Grid这个函数组件对象本身的静态属性Col缺少类型定义，二者完全无关，所以往GridProps里加Col属性当然解决不了问题。

解决方法

你需要给Grid组件本身定义包含静态属性的复合类型，具体实现步骤如下：

先分别定义Grid组件的入参类型和Col组件的入参类型：

import type { FC, ReactNode } from 'react';

// Grid组件自身的入参类型
export type GridProps = {
  children: ReactNode;
  className?: string;
};

// Col组件自身的入参类型，可根据你的实际需求补充字段
export type ColProps = {
  children: ReactNode;
  span?: number;
  className?: string;
};

定义包含静态属性的Grid复合类型：

// 复合类型 = Grid本身的函数组件类型 + 静态属性Col的类型
type GridCompositeType = FC<GridProps> & {
  Col: FC<ColProps>;
};

实现Grid组件并指定类型，最后挂载Col组件：

// 声明Grid组件时指定为上面定义的复合类型
export const Grid: GridCompositeType = ({ children, className }) => {
  // 你的Grid组件原有逻辑
  return <div className={className}>{children}</div>;
};

// 实现Col组件并挂载到Grid上
Grid.Col = ({ children, span, className }) => {
  // 你的Col组件逻辑
  return <div className={className} style={{ flex: span ?? 1 }}>{children}</div>;
};