React TypeScript项目使用react-dnd的useDrag方法入参类型不匹配报错

报错本质原因 #

当前出现的类型不兼容提示，是react-dnd 大版本升级带来的API破坏性变更导致的类型不匹配：

• react-dnd v14.0.0 及以上版本，完全修改了useDrag的入参类型定义
• 旧版本（v13及更早）支持的直接在配置顶层传入item、begin属性的写法，已经从新版类型规范中移除
• 项目当前安装的react-dnd版本为v14+，因此TS会直接提示“配置中声明的begin属性不存在”

具体适配操作 #

1. 按照新版API规范重写useDrag配置 #

这是长期稳定的适配方案，完全匹配新版类型要求，不需要额外的类型断言：

import { useEffect } from 'react';
import { useDrag } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';
import { useAppState } from '../AppStateContext';
import { DragItem } from '../DragItem';

// 定义全局唯一的拖拽类型标识，为新版useDrag必填参数
export const CardDragMimeType = 'Trello_CARD';

export const useItemDrag = (item: DragItem) => {
  const { dispatch } = useAppState();
  const [, drag, preview] = useDrag({
    // 新版必填：声明当前拖拽源对应的类型
    type: CardDragMimeType,
    // 拖拽携带的实际数据：把原有begin回调的逻辑挪到此处执行
    item: () => {
      dispatch({ type: 'SET_DRAGGED_ITEM', payload: item });
      return item;
    },
    // 拖拽结束回调逻辑保持原有业务逻辑不变
    end: () => {
      dispatch({ type: 'SET_DRAGGED_ITEM', payload: undefined });
    },
  });

  useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

  return { drag };
};

注意：项目内配套的useDrop逻辑也要同步适配，给accept参数传入和上面完全一致的CardDragMimeType常量，否则会出现逻辑运行正常但类型校验持续报错的问题。

2. 临时兼容方案（不推荐长期使用） #

如果暂时不想调整业务逻辑结构，可以通过显式类型断言临时绕过TS校验，让类型检查通过：

const [, drag, preview] = useDrag({
  item,
  begin: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: item }),
  end: () => dispatch({ type: 'SET_DRAGGED_ITEM', payload: undefined }),
// 类型断言绕过新版类型规范校验
} as any);

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