首先将null添加到useCallback中的节点类型，然后将as const添加到返回的数组中，这将使返回的数组类型化为元组（记住类型的顺序），而不是使其成为多个类型的数组

function useClientRect() {
  const [rect, setRect] = useState<DOMRect>();

  const ref = useCallback((node: HTMLElement | null) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref] as const;
}

将useClientRect挂钩的返回类型设置为[ClientRect | undefined, (node: HTMLDivElement) => void]，并将useCallback的参数类型更改为HTMLDivElement：

// packages
import { useCallback, useState } from "react";

function useClientRect(): [
  ClientRect | undefined,
  (node: HTMLDivElement) => void
] {
  const [rect, setRect] = useState<ClientRect>();

  const ref = useCallback((node: HTMLDivElement) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref];
}

export default useClientRect;

在你的use-client-react中，你传递了一个不存在的ClientRect类型，下面的代码对我来说很好用。

import { useCallback, useState } from "react";

function useClientRect() {
  const [rect, setRect] = useState();

  const ref = useCallback((node: HTMLDivElement) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);

  return [rect, ref];
}

export default useClientRect;