看板任务跨列拖拽后同步Firebase columnId的实现求助

你的核心问题是拖拽任务时仅更新了本地状态，未同步Firestore中任务的columnId字段。以下是具体修改方案：

1. 新增任务列更新函数 #

在KanbanBoard.tsx的updateTask函数下方，添加专门用于更新任务所属列的异步函数：

async function updateTaskColumn(taskId: Id, newColumnId: Id) {
  try {
    const taskRef = doc(db, "tasks", taskId.toString());
    await updateDoc(taskRef, {
      columnId: newColumnId.toString(), // 确保与Firestore字段类型一致
    });
  } catch (error) {
    console.error("更新任务列失败:", error);
    // 可选：更新失败时回滚本地状态
    setTasks(prevTasks => prevTasks.map(task => 
      task.id === taskId 
        ? {...task, columnId: prevTasks.find(t => t.id === taskId)?.columnId || task.columnId} 
        : task
    ));
  }
}

2. 修正本地状态更新逻辑（遵循React不可变原则） #

原代码中直接修改tasks数组元素的方式不符合React状态更新规范，需要改为创建新数组和对象，同时触发Firebase同步：

场景1：拖拽任务到另一个任务上 #

修改onDragOver中对应代码块：

// Dropping a Task over another task
if (isActiveATask && isOverATask) {
  setTasks((prevTasks) => {
    const activeIndex = prevTasks.findIndex((t) => t.id === activeId);
    const overIndex = prevTasks.findIndex((t) => t.id === overId);
    
    const updatedTasks = [...prevTasks];
    const newColumnId = updatedTasks[overIndex].columnId;
    
    // 更新本地任务的columnId
    updatedTasks[activeIndex] = {
      ...updatedTasks[activeIndex],
      columnId: newColumnId
    };
    
    // 同步到Firebase
    updateTaskColumn(activeId, newColumnId);
    
    return arrayMove(updatedTasks, activeIndex, overIndex);
  });
}

场景2：拖拽任务到列上 #

修改onDragOver中对应代码块：

// Dropping a Task over a column
if (isActiveATask && isOverAColumn) {
  setTasks((prevTasks) => {
    const activeIndex = prevTasks.findIndex((t) => t.id === activeId);
    
    const updatedTasks = [...prevTasks];
    const newColumnId = overId;
    
    // 更新本地任务的columnId
    updatedTasks[activeIndex] = {
      ...updatedTasks[activeIndex],
      columnId: newColumnId
    };
    
    // 同步到Firebase
    updateTaskColumn(activeId, newColumnId);
    
    return arrayMove(updatedTasks, activeIndex, activeIndex);
  });
}

3. 可选优化：仅在拖拽结束时同步（减少请求次数） #

如果希望避免onDragOver过程中多次触发Firebase请求，可以改为在onDragEnd中统一处理：

步骤A：记录任务原始列ID #

修改onDragStart函数，记录任务拖拽前的columnId：

function onDragStart(event: DragStartEvent) {
  if (event.active.data.current?.type === "Column") {
    setActiveColumn(event.active.data.current.column);
    return;
  }

  if (event.active.data.current?.type === "Task") {
    const task = event.active.data.current.task;
    // 添加originalColumnId临时字段，用于拖拽结束后对比
    setActiveTask({...task, originalColumnId: task.columnId} as Task & {originalColumnId: Id});
    return;
  }
}

步骤B：拖拽结束时同步到Firebase #

修改onDragEnd函数，在拖拽结束时检查列ID是否变化，再触发同步：

function onDragEnd(event: DragEndEvent) {
  const { active, over } = event;
  
  // 处理任务拖拽同步
  if (active.data.current?.type === "Task" && over) {
    const taskId = active.id;
    const updatedTask = tasks.find(t => t.id === taskId);
    const originalTask = activeTask as Task & {originalColumnId: Id};
    
    if (updatedTask && updatedTask.columnId !== originalTask.originalColumnId) {
      updateTaskColumn(taskId, updatedTask.columnId);
    }
  }
  
  // 重置状态
  setActiveColumn(null);
  setActiveTask(null);

  // 原有列拖拽逻辑保留
  if (!over) return;
  const activeColumnId = active.id;
  const overColumnId = over.id;

  if (activeColumnId === overColumnId) return;

  setColumns((columns) => {
    const activeColumnIndex = columns.findIndex(
      (col) => col.id === activeColumnId
    );

    const overColumnIndex = columns.findIndex(
      (col) => col.id === overColumnId
    );

    return arrayMove(columns, activeColumnIndex, overColumnIndex);
  });
}

这样修改后，拖拽任务时本地状态和Firestore数据就能保持同步了。

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