React Context报错：类型'() => string'不存在属性'Provider'

你遇到的错误核心原因是Context定义函数的返回值解构顺序完全搞反了，导致你试图在自定义Hook上访问Provider属性，自然触发类型错误。

问题根源分析 #

看你的TabContext定义函数：

export const TabContext = <A extends unknown | null>() => {
  const contextInstance = createContext<A | undefined>(undefined); // 这是带Provider的Context对象
  const useContextHook = () => { // 这是自定义的useHook
    const ctx = useContext(contextInstance);
    if (ctx === undefined) {
      throw new Error("invalid");
    }
    return ctx;
  };
  return [contextInstance, useContextHook] as const; // 返回顺序是[Context对象, 自定义Hook]
};

但在使用时你把解构顺序写反了：

// 错误：把Context对象赋值给了useTabsActionContext，把Hook赋值给了TabsActionContext
const [useTabsActionContext, TabsActionContext] = TabContext<ActiveTab>();
const [useTabsContext, TabsContext] = TabContext<SetActiveTab>();

TabsActionContext实际是那个自定义Hook函数，不是Context对象，所以没有Provider属性。

修复代码 #

只需要调整解构的顺序，把Context对象放在前面的变量，自定义Hook放在后面：

修改后的使用代码

import { Dispatch, ReactNode, SetStateAction } from "react";
import { TabContext } from "./tabContext";

export type ActiveTab = string;
export type SetActiveTab = Dispatch<SetStateAction<ActiveTab>>;

// 正确顺序：[Context对象, 自定义Hook]
const [TabsActionContext, useTabsActionContext] = TabContext<ActiveTab>();
const [TabsContext, useTabsContext] = TabContext<SetActiveTab>();

export { useTabsActionContext, useTabsContext };

export interface TabsProps {
  children: ReactNode;
}

function Tabs(props: TabsProps) {
  const { children } = props;
  // 注意：Provider必须传入value属性，否则会触发React警告
  return (
    <TabsActionContext.Provider value="默认激活Tab">
      <TabsContext.Provider value={(newTab) => console.log("切换到", newTab)}>
        {children}
      </TabsContext.Provider>
    </TabsActionContext.Provider>
  );
}

export default Tabs;

另外补充：使用Provider时必须传入value属性，否则React会抛出警告，上面代码中的value是示例值，你可以根据实际业务替换成对应的状态或方法。

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