使用 ref 解决 typescript - “No matches overload call”

Question

我去解决typescript通讯员。 这是代码和我得到的错误。

const navRef = useRef<null | HTMLElement>(null);

const setFocusables = () => {
  let navCurrent = navRef.current || null;
  menuFocusables = [
    buttonRef.current,
    ...Array.from(navCurrent?.querySelectorAll('a')),
  ];
  firstFocusableEl = menuFocusables[0];
  lastFocusableEl = menuFocusables[menuFocusables.length - 1];
};

这是我现在得到的错误。

让 navCurrent: HTMLElement | null 没有与此调用匹配的过载。
重载 1 of 4，'(iterable: Iterable | ArrayLike): HTMLAnchorElement[]'，出现以下错误。 'NodeListOf | 类型的参数 undefined' 不可分配给 'Iterable | 类型的参数 ArrayLike'。
类型“undefined”不可分配给类型“Iterable | ArrayLike'。
重载 2 of 4，'(arrayLike: ArrayLike): HTMLAnchorElement[]'，出现以下错误。 'NodeListOf | 类型的参数 undefined' 不可分配给 'ArrayLike' 类型的参数。 类型“undefined”不可分配给类型“ArrayLike”.ts(2769)

请给我解决方案。 先感谢您。

你好。

希望能解决以上问题。

谢谢

Answer 1

当navCurrent为 null 时你需要处理，所以它应该是这样的：

const navRef = useRef<null | HTMLElement>(null);

const setFocusables = () => {
  let navCurrent = navRef.current || null;
  menuFocusables = [
    buttonRef.current,
    // updated this
    ...Array.from(navCurrent?.querySelectorAll('a') ?? []),
  ];
  firstFocusableEl = menuFocusables[0];
  lastFocusableEl = menuFocusables[menuFocusables.length - 1];
};