React TypeScript中MutableRefObject与LegacyRef类型不兼容报错求助

报错核心原因 #

你碰到的TypeScript报错本质是Ref对象的类型不匹配：

• 用useRef()声明aboutRef时没指定初始值和类型，TypeScript自动推断current的类型为undefined，但<div>元素的ref要求current必须是HTMLDivElement | null类型。
• 自定义HookUseOnScreen的参数被限定为MutableRefObject<undefined>，类型范围太窄，无法兼容元素Ref的正确类型。

修复步骤 #

1. 修正自定义Hook UseOnScreen

调整Hook的参数类型以支持任意元素的Ref，同时补上IntersectionObserver的清理逻辑（避免内存泄漏）：

import { useState, useEffect, RefObject } from "react";

const UseOnScreen = (ref: RefObject<Element | null>) => {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const currentElement = ref.current;
    if (!currentElement) return;

    const observer = new IntersectionObserver(([entry]) => {
      setIntersecting(entry.isIntersecting);
    });

    observer.observe(currentElement);

    // 组件卸载或ref变化时取消监听
    return () => {
      observer.unobserve(currentElement);
    };
  }, [ref]); // 添加ref作为依赖，确保ref变化时重新建立监听

  return isIntersecting;
};

export default UseOnScreen;

2. 修正页面组件中的Ref声明

给useRef指定明确的元素类型，初始值设为null：

import { useRef } from "react";
import UseOnScreen from "../hooks/UseOnScreen";
import About from "./about";

export default function Home() {
  // 指定ref的类型为HTMLDivElement，初始值为null
  const aboutRef = useRef<HTMLDivElement>(null);
  const aboutRefValue = UseOnScreen(aboutRef);

  return (
     <>
         {/* other components */}
         <div ref={aboutRef}>{aboutRefValue && <About />}</div>
     </>
  );
}

改动说明 #

• 给useRef指定HTMLDivElement类型后，TypeScript能正确推断current是HTMLDivElement | null，完全符合<div>元素对Ref的类型要求。
• 把Hook的参数类型改为RefObject<Element | null>，既兼容所有DOM元素的Ref，也符合IntersectionObserver监听Element类型的要求。
• 补上的清理函数能避免组件卸载后Observer仍在运行的内存泄漏问题，添加ref作为useEffect的依赖，确保Ref变化时能重新建立监听。

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