React结合TypeScript实现Typed Context的类型定义、Props标注与报错解决

报错根因拆解 #

• 泛型定义错位：最初调用createContext<number>()时，误将Context的整体值类型设为number，和实际传入的「状态+更新函数」对象结构不匹配，是所有类型报错的核心源头。
• 类型适配方式错误：选中ID的状态本身就是number | null的联合类型，TypeScript原生支持这种“初始空值、后续赋值为数字”的场景，不需要做动态类型切换。
• 组件props类型标注不规范：不需要手动猜测children的类型，React内置PropsWithChildren泛型可以自动匹配合法的React节点集合，完全替代any的用法。
• 消费端解构方式不匹配：Context存储的是普通对象时，用数组解构会触发“Object is not iterable”的运行时报错。

完整可运行的实现代码 #

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

// 严格定义Context存储值的结构，消除TS自动推导带来的隐式类型问题
interface SelectedContextType {
  selectedId: number | null;
  changeValue: Dispatch<SetStateAction<number | null>>;
}

// 泛型和实际存储值结构完全对齐，默认值设为undefined作为未包裹Provider的兜底
const SelectedContext = createContext<SelectedContextType | undefined>(undefined);

// Provider组件通过PropsWithChildren标注props，自动识别传入的子节点结构
export const SelectedContextProvider = (props: PropsWithChildren) => {
  // state类型和Context定义完全对齐，初始值设为null无任何类型错误
  const [selectedId, setId] = useState<number | null>(null);

  // 更新函数直接对齐setId的原生类型，不需要重复写类型注解
  const changeValue = (value: Parameters<typeof setId>[0]) => setId(value);

  return (
    <SelectedContext.Provider value={{ selectedId, changeValue }}>
      {props.children}
    </SelectedContext.Provider>
  );
};

// 封装自定义消费Hook，强制校验Provider的包裹层级，避免运行时异常
export const useSelectedContext = () => {
  const context = useContext(SelectedContext);
  if (!context) throw new Error('useSelectedContext 必须在 SelectedContextProvider 内部调用');
  return context;
};

调用方式说明 #

• Provider的使用和你现有写法完全兼容，不需要调整：

<SelectedContextProvider>
  <CitySearchBar/>
  <CitySelect/>
</SelectedContextProvider>

• 消费端需要和Context存储的对象结构匹配，用对象解构而非数组解构：

// 正确写法
const { selectedId, changeValue } = useSelectedContext();

// 错误写法（会触发Object is not iterable报错）
// const [selectedId, setSelectedId] = useSelectedContext();

原有报错的对应修正 #

• 针对“null类型无法赋值给number类型”的报错：将状态、Context泛型的类型统一设为number | null的联合类型，初始值为null是完全合法的类型匹配，不需要额外的类型断言。
• 针对“Provider value类型不匹配”的报错：让createContext的泛型和传入Provider的value结构严格对齐，避免泛型和实际值的结构偏差。
• 针对“仅能接收状态更新函数作为value”的报错：Context的value没有固定格式要求，只要和泛型定义对齐，传入“状态+更新函数”的任意结构都是合法的。

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