TypeScript TS2322错误：ForwardedRef类型不兼容问题求解

核心原因 #

问题出在动态切换div/button组件时，dnd-kit传入的ref类型固定为ForwardedRef<HTMLDivElement>，但button需要的是ForwardedRef<HTMLButtonElement>，两种DOM元素类型不兼容。Codesandbox默认TS配置更宽松，因此未触发报错，而create-react-app的严格TS配置会检测到这个类型冲突。

具体解决方案 #

1. 给Container组件添加泛型约束 #

让组件支持传入元素类型的泛型，自动匹配ref的类型：

import { ForwardedRef, forwardRef } from 'react';

// 定义泛型组件，T为元素类型，默认HTMLDivElement
const Container = forwardRef(<T extends HTMLElement = HTMLDivElement>(
  { as: Component = 'div', ...props }: { as?: React.ElementType } & React.HTMLProps<T>,
  ref: ForwardedRef<T>
) => {
  return <Component {...props} ref={ref} />;
});

// 使用时自动匹配类型
<Container as="button" ref={yourRef} />
<Container as="div" ref={yourRef} />

2. 显式声明ref的联合类型 #

如果不想用泛型，直接把ref的类型改为两种元素的联合类型，兼容div和button：

const Container = forwardRef(
  (
    { as: Component = 'div', ...props }: { as?: 'div' | 'button' } & React.HTMLProps<HTMLDivElement> & React.HTMLProps<HTMLButtonElement>,
    ref: ForwardedRef<HTMLDivElement | HTMLButtonElement>
  ) => {
    return <Component {...props} ref={ref} />;
  }
);

3. 临时用类型断言（应急方案） #

如果需要快速验证功能，可以用类型断言绕过TS检查，但注意这会牺牲类型安全性：

// 当组件为button时
<Component {...props} ref={ref as ForwardedRef<HTMLButtonElement>} />

4. 确认依赖版本完全匹配 #

检查Codesandbox案例中@dnd-kit/core、@dnd-kit/sortable、@dnd-kit/utilities的具体版本，在你的create-react-app项目中安装完全一致的版本，避免版本差异导致的类型定义变化。

5. 调整TS配置（下策） #

如果以上方法都不生效，可以临时放宽TS严格性：在tsconfig.json中，将strict设为false，或者单独关闭strictFunctionTypes、strictNullChecks。但不推荐长期这么做，会失去TS的类型保护能力。

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