Next.js14+React-DnD16+TypeScript中useDrag Ref类型错误求解

针对你遇到的ConnectDragSource无法赋值给LegacyRef的类型错误，以下是几种可行的解决方法：

1. 显式指定useDrag的泛型元素类型 #

React-DnD的useDrag钩子支持通过泛型参数明确绑定的DOM元素类型，这样返回的ref会自动匹配对应元素的Ref类型，从根源解决类型不兼容问题。

示例代码：

import { useDrag } from 'react-dnd';

const YourComponent = () => {
  // 显式指定泛型为HTMLDivElement，匹配后续的div元素
  const [{ isDragging }, dragRef] = useDrag<HTMLDivElement>(() => ({
    item: { type: 'your-custom-item-type' }, // 替换为你的拖拽项类型
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div ref={dragRef} style={{ opacity: isDragging ? 0.5 : 1 }}>
      可拖拽元素
    </div>
  );
};

export default YourComponent;

2. 统一React类型依赖版本 #

Next.js 14依赖React 18，若项目中@types/react、@types/react-dom版本与React核心版本不一致，可能引发类型冲突。执行以下命令统一版本：

npm install @types/react@^18 @types/react-dom@^18 --save-dev
# 或使用yarn
yarn add @types/react@^18 @types/react-dom@^18 -D

3. 临时跳过库类型检查（不推荐长期使用） #

若上述方法无效，可在tsconfig.json中开启skipLibCheck跳过第三方库的类型校验，快速消除错误提示：

{
  "compilerOptions": {
    // 其他配置...
    "skipLibCheck": true
  }
}

注意：此方法会跳过所有第三方库的类型检查，可能隐藏其他潜在类型问题，仅作为临时应急方案。

4. 正确使用类型断言（应急方案） #

如果需要快速绕过类型校验，可使用类型断言将dragRef转换为对应元素的LegacyRef类型：

import type { LegacyRef } from 'react';

// ...

<div ref={dragRef as LegacyRef<HTMLDivElement>}>
  可拖拽元素
</div>

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