TypeScript结合useState与useContext开发跨页表单时报Symbol.iterator类型错误

TypeScript报错Type '{}' must have a '[Symbol.iterator] ()' method that returns an iterator.ts (2488)的核心原因是上下文的类型推导和实际值结构完全不匹配，这也是手写React Context搭配TypeScript时非常常见的坑：

• 原代码里写的createContext({})没有传入显式泛型，TS会自动把FormContext的类型推导为React.Context<{}>，也就是上下文对外暴露的值是一个空对象类型
• 但实际Provider传入的value是[formData, setFormData]这个二元数组元组，组件里又对这个上下文值做数组解构时，TS会判定你正在尝试对一个没有迭代器方法的空对象做解构操作，直接触发编译报错。

整个修复不需要改动核心业务逻辑，只需要把上下文的类型声明显式补全，避免TS的错误推导即可：

第一步：重构上下文定义文件formContext.ts #

1. 先定义全局共用的表单数据接口，方便后续多个子页面扩展字段
2. 给createContext显式传入泛型，明确上下文值是useState返回的「数据+更新函数」的元组结构
3. 给上下文配置匹配类型的初始值，避免类型缺失

修复后的核心代码：

import React, { useState, createContext, Dispatch, SetStateAction } from 'react';

// 全局共享的表单数据结构，后续子页面新增字段直接在这个接口里扩展即可
export interface SharedFormData {
  title: string;
  // 其他维度的字段可以按需追加，比如：
  // selectedServiceId?: number;
  // selectedProcedures?: Array<{ id: number; price: number }>;
}

// 明确上下文值的类型：和useState返回值结构保持一致
type FormContextType = [SharedFormData, Dispatch<SetStateAction<SharedFormData>>];

// 显式给createContext传入泛型，杜绝TS把值类型推导为空对象
// 初始值需要完全匹配声明的类型结构
export const FormContext = createContext<FormContextType>([
  { title: '' },
  () => {} // 空的占位更新函数，避免脱离Provider使用上下文时报类型错误
]);

export const FormProvider: React.FC = props => {
  const [formData, setFormData] = useState<SharedFormData>({ title: '' });
  return <FormContext.Provider value={[formData, setFormData]}>{props.children}</FormContext.Provider>;
};

第二步：优化业务组件的状态更新逻辑 #

原业务组件里的代码不需要做结构性修改，上下文类型修正后，原来的const [formData, setFormData] = useContext(FormContext) 解构会正常通过类型检查。
这里建议把直接覆盖整个对象的更新逻辑，改成函数式更新，避免多组件共享状态时出现字段覆盖的问题：

// 原来的写法会把formData里其他已经存储的字段全部覆盖
// onClick={() => setFormData({ title: data.title })}

// 改成函数式更新，保留之前已经存入的所有字段，只更新需要变更的title
onClick={() => setFormData(prev => ({ ...prev, title: data.title }))}

如果不想自己手写Context和useState的组合，可以参考以下更轻量化的实现：

• 用Zustand这类轻量状态管理库替代手写Context：自带完善的TS类型推导，不需要手动写泛型声明，跨组件共享状态时不会出现不必要的全量重渲染，适合长期维护的多页面共享表单场景
• 用专门的表单方案：如果是多步骤的复杂表单，可以直接用React Hook Form的全局表单状态能力，不需要额外维护自定义的Context结构，本身就支持跨组件读写同一份表单数据
• 状态提升到顶层路由：简单场景下可以把表单状态直接定义在全局路由组件里，通过props把数据和更新函数传到各个子页面，这种方式没有额外依赖，但组件嵌套层级深的时候会出现繁琐的逐层传值问题。

内容的提问来源于stack exchange，提问作者Błażej Bałtruszewicz