useReducer类型错误致数组未识别：React+TS Todo项目Vercel部署异常

核心问题 #

你的代码中tasksState的结构在本地和Vercel环境不一致：

• 本地开发时，localStorage无旧数据，初始化状态是{ tasks: [] }（对象类型）
• Vercel部署后，localStorage中存储的是旧数据（直接是Task数组而非对象），导致初始化后tasksState变成了数组类型

这就解释了为什么在Vercel上需要用Array.from(tasksState).length才能获取长度——此时tasksState本身是数组，而本地环境中它是对象，直接访问length会得到undefined。

修复步骤 #

1. 明确状态类型约束

先定义统一的状态结构类型，避免类型混淆：

import { useReducer } from 'react';

export interface Task {
  id: number;
  content: string;
  isDone: boolean;
}

// 定义reducer的状态结构
interface TaskState {
  tasks: Task[];
}

// 定义reducer的action类型（根据你的实际action补充）
type TaskAction = 
  | { type: 'ADD_TASK'; payload: Task }
  | { type: 'TOGGLE_TASK'; payload: number }
  | { type: 'DELETE_TASK'; payload: number };

// 给reducer加上类型约束
function TaskReducer(state: TaskState, action: TaskAction): TaskState {
  switch (action.type) {
    case 'ADD_TASK':
      return { tasks: [...state.tasks, action.payload] };
    case 'TOGGLE_TASK':
      return { 
        tasks: state.tasks.map(task => 
          task.id === action.payload ? { ...task, isDone: !task.isDone } : task
        ) 
      };
    case 'DELETE_TASK':
      return { tasks: state.tasks.filter(task => task.id !== action.payload) };
    default:
      return state;
  }
}

2. 兼容旧数据的初始化逻辑

修改useReducer的初始化函数，确保无论localStorage里是数组还是对象，最终返回的都是统一的TaskState结构：

const TASKS_STORAGE_KEY = 'todo_tasks';

const [tasksState, dispatch] = useReducer<TaskReducer>(
  TaskReducer,
  { tasks: [] },
  () => {
    const storedTasks = localStorage.getItem(TASKS_STORAGE_KEY);
    if (storedTasks) {
      const parsedData = JSON.parse(storedTasks);
      // 兼容旧数据：如果解析结果是数组，包装成标准状态对象
      return Array.isArray(parsedData) ? { tasks: parsedData } : parsedData;
    }
    return { tasks: [] };
  }
);

3. 修复localStorage存储逻辑

确保每次状态更新后，存储的是完整的TaskState对象，而不是单独的tasks数组：

// 在reducer中添加存储逻辑（或在useEffect中监听状态变化存储）
function TaskReducer(state: TaskState, action: TaskAction): TaskState {
  let newState: TaskState;
  switch (action.type) {
    // ...你的action处理逻辑
    default:
      newState = state;
  }
  // 存储完整的状态对象
  localStorage.setItem(TASKS_STORAGE_KEY, JSON.stringify(newState));
  return newState;
}

4. 统一数据访问方式

在组件中，统一通过tasksState.tasks访问任务数组，比如获取数量：

// 替换之前的Array.from写法
const tasksQuantity = tasksState.tasks.length;

为什么会出现环境差异？ #

本地开发时，你的浏览器localStorage可能没有旧的存储数据，所以初始化状态是标准的{ tasks: [] }对象；而Vercel部署后，用户（或你之前测试时）的浏览器localStorage中保留了旧代码存储的直接数组格式，导致初始化后状态结构异常。通过添加类型约束和旧数据兼容逻辑，就能彻底解决这个问题。

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