如何修复React TypeScript中useHotkeys返回ref与div ref属性类型不匹配的错误

解决方案 #

方案1：给自定义钩子添加泛型（推荐，类型安全可复用） #

useHotkeys本身支持传入绑定元素的类型泛型，你可以把自定义的useKeyboardFormSubmit改造成支持泛型的版本，既可以解决当前的类型冲突问题，后续也可以灵活绑定到form、section等其他元素上：

import { useHotkeys, Options } from 'react-hotkeys-hook';
import type { MutableRefObject } from 'react';

// 泛型T默认设为HTMLDivElement，适配当前div绑定场景
export const useKeyboardFormSubmit = <T extends Element = HTMLDivElement>(
  callback: () => void,
  deps: any[] = [],
): MutableRefObject<T | null> => {
  const hotKeyOptions: Options = {
    enableOnTags: ['INPUT', 'TEXTAREA', 'SELECT'],
  };
  // 给useHotkeys传入泛型T，指定返回ref的元素类型
  const ref = useHotkeys<T>(
    'ctrl+enter, cmd+enter',
    () => {
      callback();
    },
    hotKeyOptions,
    deps,
  );
  return ref;
};

修改完成后在组件中直接调用即可，不需要额外做类型断言，类型校验会自动通过，快捷键功能也不会受影响。

方案2：针对性类型断言（应急可用） #

如果你不想修改自定义钩子的代码，不要直接断言为LegacyRef<HTMLDivElement>，之前的断言方式会丢失ref的引用指向导致快捷键失效，需要保持原ref的结构做类型断言：

import type { MutableRefObject } from 'react';

const ref = useKeyboardFormSubmit(() => {
  console.log('contact got keystrokes');
  handleSubmit(onSubmit)();
}) as MutableRefObject<HTMLDivElement | null>;

修改后类型校验会通过，快捷键功能也可以正常运行。

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