升级MUI React组件时遇到TypeScript forwardRef类型不兼容错误

我刚接触TypeScript的时候也经常被这类类型不兼容的问题搞懵，太懂这种头疼的感觉了！咱们先拆解下你的问题根源，再一步步把它解决掉。

你的错误提示核心是forwardRef的渲染函数参数类型不匹配——PropsWithoutRef<P>和你定义的WithoutTheme<P>没法兼容。问题出在withTheme高阶组件里，forwardRef的默认类型约束和你自定义的props类型没对齐。

下面是修复后的代码，我会把关键调整点给你讲清楚：

import type { Theme } from "@mui/material/styles";
import { useTheme } from "@mui/material/styles";
import type { ComponentType, ForwardRefRenderFunction, Ref } from "react";
import React, { forwardRef } from "react";

// 定义剔除theme属性的类型
type WithoutTheme<P> = Omit<P, "theme">;

function withTheme<P extends { theme?: Theme }>(Component: ComponentType<P>) {
  // 用ForwardRefRenderFunction明确约束渲染函数的参数类型
  const renderComponent: ForwardRefRenderFunction<unknown, WithoutTheme<P>> = (
    props: WithoutTheme<P>,
    ref: Ref<unknown>,
  ) => {
    const theme = useTheme();
    const combinedProps = { ...props, theme };

    // 这里的类型断言是安全的，因为我们确实补上了theme属性
    return <Component ref={ref} {...combinedProps as P} />;
  };

  return forwardRef(renderComponent);
}

export { withTheme };

关键修复细节： #

• 从React导入ForwardRefRenderFunction和Ref类型，直接明确渲染函数的参数类型，避免和PropsWithoutRef的默认定义产生冲突
• 把渲染逻辑单独提取成变量并标注类型，让TypeScript清晰识别到：这个forwardRef接收的props是去掉theme后的版本，而不是默认推导的PropsWithoutRef<P>
• 最后用as P的断言是合理的，因为我们已经手动给props补上了theme属性，完全符合P的类型约束

如果你喜欢更简洁的写法，也可以直接给forwardRef指定泛型参数：

import type { Theme } from "@mui/material/styles";
import { useTheme } from "@mui/material/styles";
import type { ComponentType, Ref } from "react";
import React, { forwardRef } from "react";

type WithoutTheme<P> = Omit<P, "theme">;

function withTheme<P extends { theme?: Theme }>(Component: ComponentType<P>) {
  // 直接给forwardRef指定第二个泛型为WithoutTheme<P>
  return forwardRef<unknown, WithoutTheme<P>>((
    props: WithoutTheme<P>,
    ref: Ref<unknown>,
  ) => {
    const theme = useTheme();
    const combinedProps = { ...props, theme };

    return <Component ref={ref} {...combinedProps as P} />;
  });
}

export { withTheme };

这种写法的核心是直接告诉TypeScript：这个forwardRef接收的props类型是WithoutTheme<P>，从根源上避免了类型不匹配的问题。

你可以试试上面两种写法，应该能顺利解决这个TS错误。刚开始用TypeScript的时候，类型约束确实容易绕，多写几次慢慢就摸透规律啦！

备注：内容来源于stack exchange，提问作者Vana