TS2339报错：类型'ModeContextType | undefined'上不存在属性'menuInfo'如何解决？

• 定义ModeContext时泛型指定为ModeContextType | undefined，且初始值设为undefined，TypeScript判定useContext(ModeContext)的返回值可能为undefined，直接解构属性属于非法操作，因此触发TS2339报错。

方案1：封装专属自定义Hook（最推荐） #

对useContext逻辑做封装，增加非空判断兜底，既保障类型安全，也能避免运行时异常：

// 在Context定义文件中新增该Hook
export function useModeContext() {
  const context = useContext(ModeContext);
  if (context === undefined) {
    throw new Error('useModeContext 必须在ModeContext.Provider包裹的组件内部使用');
  }
  return context;
}

子组件中替换调用方式即可：

const { menuInfo, modeData, currentModeCode, setCurrentModeCode } = useModeContext();

方案2：使用非空断言（适合确定一定在Provider内部的场景） #

直接在useContext返回值后加!，强制告知TypeScript该值不可能为undefined：

const { menuInfo, modeData, currentModeCode, setCurrentModeCode } = useContext(ModeContext)!;

⚠️ 该方案会跳过类型检查，若组件未被Provider包裹会直接抛出运行时错误，需谨慎使用。

方案3：提供合法初始值 #

如果业务上有可用的默认值，直接给createContext传入符合ModeContextType类型的初始值，从根源上消除undefined的可能性：

// 修改Context定义
export const ModeContext = createContext<ModeContextType>({
  menuInfo: {},
  modeData: {},
  currentModeCode: 0,
  setCurrentModeCode: () => {}
});

修改后useContext返回值永远为ModeContextType类型，无需额外判空即可直接解构。

• 当前ModeContextType中定义的currentModeCode是number类型，但setCurrentModeCode的入参是string类型，若该方法是useState返回的状态修改函数，需保证入参类型和状态类型匹配，避免后续调用时出现新的类型报错。

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