TypeScript自定义React Hook返回类型缺失报错(TS7010)求助

错误含义 #

TS7010报错是因为你编写的useOverflowY函数没有显式声明返回值类型，在TypeScript严格类型检查模式下，这种情况会被判定为隐式any类型，不符合类型安全要求，因此抛出该提示。

解决方法 #

1. 给函数添加返回类型注解 #

你可以先定义一个返回类型的接口，再给函数指定该类型：

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

// 定义返回值的类型接口
interface UseOverflowYResult {
  ref: RefObject<HTMLDivElement>;
  isOverflowY: boolean;
}

function useOverflowY(): UseOverflowYResult {
  const [isOverflowY, setIsOverflowY] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const { current } = ref;

    if (current) {
      // 修正判断逻辑：用元素自身的可视高度替代窗口高度
      const hasOverflowY = current.scrollHeight > current.clientHeight;
      setIsOverflowY(hasOverflowY);
    }
  }, []);

  return { ref, isOverflowY };
}

export default useOverflowY;

也可以直接在函数后写返回类型，省去单独定义接口的步骤：

function useOverflowY(): { ref: RefObject<HTMLDivElement>; isOverflowY: boolean } {
  // 原有逻辑
}

2. 优化Hook的检测逻辑 #

你的原代码还有两处可以改进的地方：

• 依赖项[ref]无意义：useRef返回的ref对象引用稳定，不会随组件重渲染改变，依赖项设为空数组[]即可。
• 仅初始化检测不够：原代码只在组件挂载时检测一次，窗口大小变化或元素内容更新时不会重新检测，建议补充监听逻辑：

useEffect(() => {
  const checkOverflow = () => {
    const { current } = ref;
    if (current) {
      const hasOverflowY = current.scrollHeight > current.clientHeight;
      setIsOverflowY(hasOverflowY);
    }
  };

  // 初始化检测
  checkOverflow();
  // 监听窗口 resize 事件
  window.addEventListener('resize', checkOverflow);
  // 监听元素内容动态变化
  const observer = new MutationObserver(checkOverflow);
  if (ref.current) {
    observer.observe(ref.current, {
      childList: true,
      subtree: true,
      characterData: true
    });
  }

  // 组件卸载时清理监听
  return () => {
    window.removeEventListener('resize', checkOverflow);
    observer.disconnect();
  };
}, []);

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