React Ref类型报错：Property 'current'不存在，正确类型是什么？

你遇到的问题是因为错误地将ref的类型指定为HTMLElement——React中的ref是一个封装了DOM元素的引用对象，本身带有current属性指向实际DOM节点，而非DOM元素本身，所以会触发找不到current的类型错误。

正确的类型指定 #

对于通过useRef创建的ref，你需要使用React.RefObject<HTMLElement | null>类型（或者React.MutableRefObject<HTMLElement | null>，前者更通用），因为ref的current属性初始值可能为null。

修改后的完整代码 #

import { useState, useLayoutEffect, RefObject } from 'react';

export const useIsOverflow = (ref: RefObject<HTMLElement | null>) => {
  const [isOverflow, setIsOverflow] = useState<boolean | undefined>(undefined);

  useLayoutEffect(() => {
    const current = ref.current;

    const trigger = () => {
      if (!current) return;
      const hasOverflow = current.scrollHeight > current.clientHeight;
      setIsOverflow(hasOverflow);
    };

    trigger();
  }, [ref]);

  return isOverflow;
};

额外说明 #

• 必须从react包中导入RefObject类型才能使用。
• 由于current可能为null，在访问其属性前一定要做非空判断，避免运行时报错。
• 给useState添加泛型<boolean | undefined>，让状态的类型更明确，符合TypeScript的类型规范。

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