React Context TypeScript报错：Property 'sidebar'不存在于'IStateContext | null'

问题原因 #

你定义的Context类型是IStateContext | null，初始值为null，TypeScript认定useStateContext()返回的值可能为null，直接解构访问sidebar等属性时，自然会触发类型错误——因为null上不存在这些属性。

解决方案 #

方案1：在自定义Hook中添加运行时校验（推荐）

修改useStateContext Hook，增加非空检查，确保只有在Context Provider内部调用时才返回有效值，同时让TypeScript明确返回类型为IStateContext：

// ./context/contextProvider.tsx
import React, {createContext, useState, useContext, Dispatch, SetStateAction } from "react";

interface IStateContext {
  sidebar: boolean;
  setSidebar: Dispatch<SetStateAction<boolean>>;
  screenSize: number | undefined;
  setScreenSize: Dispatch<SetStateAction<number | undefined>>;
  activeMenu: boolean;
  setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

const stateContext = createContext<IStateContext | null>(null);

interface IContextProviderProps {
  children: React.ReactNode;
}

export const ContextProvider = ({ children }: IContextProviderProps) => {
  const [sidebar, setSidebar] = useState<boolean>(false);
  const [activeMenu, setActiveMenu] = useState<boolean>(true);
  const [screenSize, setScreenSize] = useState<number | undefined>(undefined);

  return (
    <stateContext.Provider value={{sidebar, setSidebar, activeMenu, setActiveMenu, screenSize, setScreenSize }}>
      {children}
    </stateContext.Provider>
  );
};

export const useStateContext = () => {
  const context = useContext(stateContext);
  // 运行时检查，确保组件在Provider内部使用
  if (!context) {
    throw new Error('useStateContext must be used within a ContextProvider');
  }
  return context;
};

修改后，Sidebar.tsx无需改动，TypeScript会自动识别useStateContext()返回的是确定的IStateContext类型，解构时不再报错。

方案2：给Context提供完整默认值

将Context的初始值从null改为符合IStateContext接口的默认对象，这样Context类型就变为IStateContext，不再包含null：

// 修改Context创建代码
const stateContext = createContext<IStateContext>({
  sidebar: false,
  setSidebar: () => {}, // 默认空函数，避免运行时错误
  screenSize: undefined,
  setScreenSize: () => {},
  activeMenu: true,
  setActiveMenu: () => {},
});

注意：默认的dispatch函数是空函数，必须确保所有使用该Context的组件都包裹在ContextProvider内部，否则调用setSidebar等方法不会有实际效果。

方案3：使用非空断言（不推荐）

在解构时添加非空断言!，强制告诉TypeScript返回值不为null，但这种方法跳过了类型检查，若组件不在Provider内部使用，会导致运行时错误：

const {sidebar, setSidebar, activeMenu, setActiveMenu, screenSize, setScreenSize} = useStateContext()!;

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