使用useContext()遇TS错误：属性不存在于ServerContextJSONValue类型

你遇到的TypeScript错误核心在于：传给Context.Provider的store变量类型是ServerContextJSONValue，和你定义的ProviderContextType不匹配。虽然你给createContext指定了ProviderContextType类型，但实际传入的value类型优先级更高，导致上下文的实际类型被覆盖成了ServerContextJSONValue，所以在useContext解构text时会报错。

1. 确保store类型与ProviderContextType一致 #

给store显式标注类型，强制它符合你定义的上下文类型：

// Provider.tsx
import { createContext, ReactNode } from 'react';

interface ProviderContextType {
  text: string;
}

export const Context = createContext<ProviderContextType>({
  text: ''
});

function Provider({ children }: { children: ReactNode }) {
  // 显式标注store的类型为ProviderContextType
  const store: ProviderContextType = {
    text: '替换为你的实际业务值'
    // 若有其他属性，需同步在ProviderContextType中定义
  };

  return (
    <Context.Provider value={store}>
      {children}
    </Context.Provider>
  );
}

export default Provider;

2. 若store类型固定为ServerContextJSONValue，调整上下文类型定义 #

如果store是从外部状态管理（如服务端数据、第三方状态库）获取的，无法修改其类型，那就把ProviderContextType改成和ServerContextJSONValue匹配的结构：

// Provider.tsx
import { createContext, ReactNode } from 'react';

// 直接复用ServerContextJSONValue类型，或按需扩展
type ProviderContextType = ServerContextJSONValue;

export const Context = createContext<ProviderContextType>({
  // 这里的默认值要严格符合ServerContextJSONValue的结构
});

function Provider({ children }: { children: ReactNode }) {
  const store = /* 你的store获取逻辑 */;

  return (
    <Context.Provider value={store}>
      {children}
    </Context.Provider>
  );
}

export default Provider;

3. 临时应急：类型断言（不推荐） #

如果暂时无法调整类型结构，可以用类型断言强制指定value的类型，但这会跳过TypeScript的类型检查，可能隐藏潜在问题：

// Provider.tsx中修改Context.Provider的value
<Context.Provider value={store as unknown as ProviderContextType}>
  {children}
</Context.Provider>

• 确认Others.tsx中导入的Context是Provider.tsx里定义的那个，没有导入其他同名上下文。
• 检查store的实际结构，确保它确实包含text属性，避免运行时错误。

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