使用React cloneElement传自定义Props遇TypeScript类型错误如何解决？

我需要在特定场景下覆写组件，通过cloneElement向下传递自定义props，代码如下：

const fixChildren = cloneElement(children,
{preSetCalculations: {itemWidth} }) 

但传递{preSetCalculations: {itemWidth} }时出现TypeScript错误：

No overload matches this call. The last overload gave the following
error. Argument of type '{ preSetCalculations: { itemWidth: number; };
}' is not assignable to parameter of type 'Partial &
Attributes'. Object literal may only specify known properties, and
'preSetCalculations' does not exist in type 'Partial &
Attributes'

需求是处理任意类型的元素，且无法预先知晓其接受的props，以下是几种可行的解决方法：

方法一：类型断言（快速解决） #

直接将自定义props断言为兼容类型，绕过TypeScript的类型检查：

// 最简方式
const fixChildren = cloneElement(children,
  { preSetCalculations: { itemWidth } } as any
);

// 更严谨的写法，保留Attributes类型约束
const fixChildren = cloneElement(children,
  { preSetCalculations: { itemWidth } } as Record<string, unknown> & React.Attributes
);

方法二：泛型约束（类型安全） #

如果你的组件是泛型组件，通过泛型约束让TypeScript兼容子组件的未知props：

function YourComponent<T extends React.ElementType>({ children }: { children: React.ReactElement<T> }) {
  const itemWidth = 100;
  // 断言为子组件的Props类型，保留原有props的类型检查
  const fixChildren = cloneElement(children, {
    preSetCalculations: { itemWidth }
  } as React.ComponentProps<T>);
  
  return fixChildren;
}

方法三：扩展子元素类型（明确props结构） #

如果清楚自定义props的结构，给children断言为包含该props的元素类型：

const fixChildren = cloneElement(
  children as React.ReactElement<{ preSetCalculations?: { itemWidth: number } }>,
  { preSetCalculations: { itemWidth } }
);

方法对比 #

• 类型断言as any：快速解决，适合临时场景，但会丢失类型检查能力
• 泛型约束：最严谨，适合需要保留类型安全的组件，同时支持任意子组件类型
• 扩展子元素类型：适合明确自定义props结构的场景，比any更有类型保障

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