解构React Context对象报错：属性不存在于类型‘{}’中

问题根源是创建Context时未指定明确类型，TypeScript仅能推断出Context类型为{}，因此解构formData和setFormData时会提示属性不存在。以下是具体修复步骤：

1. 定义Context的类型 #

在App.tsx中，先为Context数据定义TypeScript类型：

// 从defaultFormData自动推断FormData的类型
type FormData = typeof defaultFormData;

// 定义Context的完整类型结构
type FormStateContextType = {
  formData: FormData;
  setFormData: React.Dispatch<React.SetStateAction<FormData>>;
};

2. 创建带类型的Context #

修改FormStateContext的创建代码，指定上述类型并提供符合要求的默认值：

export const FormStateContext = createContext<FormStateContextType>({
  formData: defaultFormData,
  setFormData: () => {}, // 用空函数作为默认setter，避免undefined类型问题
});

3. 组件中正常使用Context #

此时在step.tsx中解构Context时，TypeScript能正确识别属性类型，不会再报错：

export function Step() {
  const { formData, setFormData } = useContext(FormStateContext);
  // 可正常使用formData和setFormData
}

补充说明 #

• 若不想写默认空函数，也可将Context类型设为FormStateContextType | undefined，但使用时需先判断Context是否存在，不如提供默认值便捷。
• 确保defaultFormData的结构与实际使用的formData结构一致，保证类型推断的准确性。

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