TS报错RefObject<HTMLDivElement>无法赋值给DOMTarget|undefined如何解决

GSAP ScrollTrigger的trigger配置项期望接收DOMTarget类型，也就是真实DOM节点、DOM选择器字符串这类直接指向目标元素的值，而React useRef返回的是RefObject包装对象，真实DOM元素存储在它的current属性上，直接传入整个ref对象就会触发类型不匹配错误。

传入ref对象上挂载的真实DOM节点leftEl.current即可，同时需要做好空值判断，避免DOM还没挂载时拿到null导致运行时错误。

修正后的代码：

import { useRef, useLayoutEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// 提前注册ScrollTrigger插件
gsap.registerPlugin(ScrollTrigger);

export default function DemoComponent() {
  const leftEl = useRef<HTMLDivElement>(null);
    
  useLayoutEffect(() => {
    // DOM未挂载时直接返回，避免空值错误
    if (!leftEl.current) return;

    const tl = gsap.timeline({
      defaults: {
        ease: 'power4.inOut',
        duration: 1.5,
        scrollTrigger: {
          trigger: leftEl.current, // 传入ref绑定的真实DOM节点
        },
      },
    });

    // 组件卸载时清理实例，避免内存泄漏
    return () => {
      tl.kill();
      ScrollTrigger.getAll().forEach(st => st.kill());
    };
  }, []);

  return <div ref={leftEl}></div>
}

• 所有GSAP、ScrollTrigger的初始化逻辑必须放在useLayoutEffect或者useEffect中执行，此时DOM已经完成挂载，ref才能拿到对应的元素节点
• 如果不想用ref，也可以直接给目标元素加专属类名/ID，给trigger传选择器字符串，比如trigger: '.left-scroll-target'，但ref写法不会因为选择器重名出现匹配错误，是React场景下的推荐写法
• 如果极少数场景下TS仍然报类型错误，可以加类型断言兜底：trigger: leftEl.current as HTMLElement

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