使用React Context共享数据时遇TypeScript类型错误：toggleExpand属性不存在

错误原因 #

你创建Context时指定的类型是AccHeaderContextProps | undefined，且默认值设为undefined，这导致useContext(AccordionContext)返回的值可能为undefined。直接解构expand和toggleExpand时，TypeScript会报错——因为undefined上不存在这些属性。

三种解决方案 #

1. 给Context设置完整默认值 #

直接为Context提供符合AccHeaderContextProps类型的默认值，这样useContext返回的就不会是undefined：

interface AccHeaderContextProps {
  expand: boolean;
  toggleExpand: () => void;
}

const AccordionContext = createContext<AccHeaderContextProps>({
  expand: false,
  toggleExpand: () => {} // 空函数作为默认实现
});

2. 使用前检查Context是否存在 #

在组件中先判断上下文是否有效，避免解构undefined：

function AccordionHeder(props: AccHeaderProps) {
  const { title } = props;
  const context = useContext(AccordionContext);
  
  // 确保组件在Provider内部使用，否则抛出错误
  if (!context) {
    throw new Error("AccordionHeder必须在AccordionContext.Provider内部使用");
  }

  const { expand, toggleExpand } = context;
  return (
    <button onClick={toggleExpand}>
      {title} <span>{expand ? "-" : "+"}</span>
    </button>
  );
}

3. 封装自定义Hook（推荐） #

把上下文的获取和校验逻辑封装成自定义Hook，复用性更强：

function useAccordionContext() {
  const context = useContext(AccordionContext);
  if (!context) {
    throw new Error("useAccordionContext必须在AccordionContext.Provider内部使用");
  }
  return context;
}

// 在组件中使用
function AccordionHeder(props: AccHeaderProps) {
  const { title } = props;
  const { expand, toggleExpand } = useAccordionContext();
  return (
    <button onClick={toggleExpand}>
      {title} <span>{expand ? "-" : "+"}</span>
    </button>
  );
}

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