Next.js自定义Intersection Observer Hook返回值类型异常求助

问题原因 #

你遇到的问题是因为用数组返回Hook结果时，TypeScript默认会将数组元素推断为所有返回值类型的联合类型（MutableRefObject<null> | boolean），而非明确的元组类型。这是因为TypeScript认为数组是可变结构，会统一元素类型，导致解构后的变量类型混淆。

解决方案 #

方案1：显式指定Hook的元组返回类型 #

给自定义Hook添加明确的元组返回类型，让TypeScript知道数组中每个位置的具体类型：

import { useState, useEffect, useRef, MutableRefObject } from 'react';

// 明确指定返回值为元组类型
function useIntersectionObserver(): [MutableRefObject<null>, boolean] {
  const containerRef = useRef<null>(null);
  const [isCompleted, setIsCompleted] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const [entry] = entries;
      if (entry.isIntersecting) {
        setIsCompleted(true);
        observer.disconnect();
      }
    });

    containerRef.current && observer.observe(containerRef.current);

    return () => observer.disconnect();
  }, []);

  return [containerRef, isCompleted];
}

在组件中使用时，解构后的变量类型会被正确推断：

const [containerRef, isCompleted] = useIntersectionObserver();

// 此时containerRef的类型是MutableRefObject<null>，可直接作为ref使用
<div ref={containerRef}>目标容器</div>

方案2：改用对象返回Hook结果 #

相比数组，对象的属性类型会被TypeScript正确推断，不会出现联合类型混淆的问题：

import { useState, useEffect, useRef } from 'react';

function useIntersectionObserver() {
  const containerRef = useRef<null>(null);
  const [isCompleted, setIsCompleted] = useState(false);

  // Intersection Observer逻辑同上...

  return { containerRef, isCompleted };
}

组件中解构使用：

const { containerRef, isCompleted } = useIntersectionObserver();

<div ref={containerRef}>目标容器</div>

验证效果 #

两种方案都能让containerRef保持MutableRefObject<null>类型，isCompleted保持boolean类型，彻底解决TypeScript报错问题。

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