使用MUI过渡组件时ForwardRef的TypeScript类型错误问题

修正后的代码 #

import { forwardRef } from 'react';
import { Grid, Grow } from '@mui/material';

// 明确泛型类型：第一个参数是ref指向的DOM元素类型，第二个是组件props类型
const MyTransition = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  function Transition(props, ref) {
    return (
      <div {...props} ref={ref}>
        <Grid item xs={12} sm={6}>
          {/* <Inputs ... /> */}
        </Grid>
      </div>
    );
  }
);

// 使用示例
<Grow>
  <MyTransition />
</Grow>

错误原因解析 #

你之前使用forwardRef<object, object>的泛型定义存在核心问题：

• 第一个泛型参数是ref要指向的实例类型，div元素的ref必须是HTMLDivElement类型，而非宽泛的object，TypeScript的严格类型检查会直接抛出不兼容错误。
• 第二个泛型参数是组件的props类型，使用React.HTMLAttributes<HTMLDivElement>可以让组件继承div的所有原生props，避免props传递时的类型冲突。

MUI过渡组件子组件要求（官方文档翻译） #

过渡组件对其子组件有以下强制要求：

1. 必须接受ref属性：过渡组件需要通过ref访问子组件的DOM节点，以此触发和控制动画逻辑。
2. 必须是单个DOM元素：不能传递多个子元素或Fragment（Fragment没有对应的真实DOM节点，过渡组件无法获取ref来执行动画）。
   若需要包装多个元素，必须将它们放入单个DOM容器（如div、span）中，同时确保ref类型正确指向该容器元素。

额外优化方案 #

如果不需要额外的div容器，可以直接将ref传递给内部的Grid组件（Grid最终渲染为div），此时泛型需对应调整：

const MyTransition = forwardRef<HTMLDivElement, React.ComponentProps<typeof Grid>>(
  function Transition(props, ref) {
    return (
      <Grid {...props} ref={ref} item xs={12} sm={6}>
        {/* <Inputs ... /> */}
      </Grid>
    );
  }
);

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