我在nextjs项目中创建了一个定制挂钩，以使用intersection observer检查特定容器在视区中是否可见。
钩子：

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

const useIsTheorySectionCompleted = (options: IntersectionObserverInit) => {
  const containerRef = useRef(null);
  const [isCompleted, setIsCompleted] = useState(false);

  useEffect(() => {
    const cb = (entries: IntersectionObserverEntry[]) => {
      const [entry] = entries;
      if (!isCompleted) {
        setIsCompleted(entry.isIntersecting);
      }
    };

    const observer = new IntersectionObserver(cb, options);
    if (containerRef.current) observer.observe(containerRef.current);

    return () => {
      if (containerRef.current) observer.unobserve(containerRef.current);
    };
  }, [containerRef, isCompleted, options]);

  return [containerRef, isCompleted];
};

export default useIsTheorySectionCompleted;

返回值containerRef的类型为MutableRefObject<null>

而另一个返回值的类型为boolean

现在，当我在组件中导入这些值时，它们突然有了一个联合类型<boolean | >

当我想要使用containerRef作为ref时，这会产生TS错误