构建React应用时遇MutableRefObject类型不兼容错误求助

问题本质 #

你传递给组件的ref绑定的是HTMLParagraphElement（即<p>标签），但组件props里的html字段要求的是HTMLDivElement（即<div>标签）的MutableRefObject，同时你传递的ref还可能为null，和要求的非null类型不匹配，这就是触发错误的原因。

修复方案 #

方案1：统一元素类型（推荐） #

如果组件确实需要接收<div>的ref，把绑定ref的元素从<p>改成<div>，同时修正ref的类型声明：

// 声明ref时指定正确类型
const targetRef = useRef<HTMLDivElement>(null);

// 绑定到<div>元素上
<div ref={targetRef}>内容</div>

方案2：调整props类型定义 #

如果组件可以接受<p>元素的ref，直接修改props的类型：

type props = {
  html: React.MutableRefObject<HTMLParagraphElement | null>;
  data: any;
  rows: any;
};

方案3：使用宽泛类型兼容多种元素 #

如果组件需要支持多种元素类型，用更通用的HTMLElement类型：

type props = {
  html: React.MutableRefObject<HTMLElement | null>;
  data: any;
  rows: any;
};

额外建议 #

尽量避免使用any类型，为data和rows定义具体的类型结构，能提前规避更多类型相关的问题。

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