使用TypeScript构建UseContext Provider时遇类型错误求助

你遇到的类型错误核心原因是：ExempleCtx的类型定义为AppContextInterface | null，调用useContext(ExempleCtx)返回的值可能是null，直接解构{ value, setValue }会触发TypeScript报错——因为null不存在这些属性。

方案1：给Context提供合法的默认值（推荐） #

创建Context时，不要用null作为默认值，而是提供一个完全符合AppContextInterface结构的默认值，这样useContext返回的类型就会是确定的AppContextInterface，无需处理null的情况：

type SetValue = (value: any) => void;
export interface AppContextInterface {
  value: any;
  setValue: SetValue;
}

// 提供符合接口的默认值
export const ExempleCtx = createContext<AppContextInterface>({
  value: null,
  setValue: () => {}, // 默认空函数避免调用报错
});

const CtxProvider = ({ children }: { children: React.ReactNode }) => {
  const [value, setValue] = useState<any>(null);
  return (
    <ExempleCtx.Provider value={{ value, setValue }}>
      {children}
    </ExempleCtx.Provider>
  );
};
export default CtxProvider;

之后在Btn组件中解构就不会报错了：

function Btn() {
  const { value, setValue } = useContext(ExempleCtx);
  return <div onClick={() => setValue("thomas")}>{value}</div>;
}

方案2：使用时先判断Context是否为null #

如果坚持要用null作为Context的默认值，必须在解构前先判断返回值是否为null，避免访问不存在的属性：

function Btn() {
  const ctx = useContext(ExempleCtx);
  
  // 先判断上下文是否存在，不存在则返回占位内容或提示
  if (!ctx) {
    return <div>请在CtxProvider组件内使用此组件</div>;
  }

  const { value, setValue } = ctx;
  return <div onClick={() => setValue("thomas")}>{value}</div>;
}

额外优化：替换any为具体类型（可选） #

代码中大量使用any会弱化TypeScript的类型检查能力，建议根据实际业务场景替换为具体类型。比如假设value是字符串类型：

// 定义具体类型
type ValueType = string | null;
type SetValue = (value: ValueType) => void;

export interface AppContextInterface {
  value: ValueType;
  setValue: SetValue;
}

export const ExempleCtx = createContext<AppContextInterface>({
  value: null,
  setValue: () => {},
});

const CtxProvider = ({ children }: { children: React.ReactNode }) => {
  // useState也对应具体类型
  const [value, setValue] = useState<ValueType>(null);
  return (
    <ExempleCtx.Provider value={{ value, setValue }}>
      {children}
    </ExempleCtx.Provider>
  );
};

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