React Context Provider状态未传递至子组件TS报错排查

报错本质是类型定义混淆：你当前写的ReferralProviderProps把Context要向下传递的getReferralData、referralData、error、loading错误定义成了ReferralProvider组件需要从外部接收的入参，但实际上这些值都是组件内部通过useReducer维护、内部定义的方法，根本不需要父组件传入。你在ApplicationProvider中使用<ReferralProvider>时没有传这几个属性，TS就直接抛出了类型错误，编译阻断导致Provider没有正常挂载，子组件自然拿不到传递的状态。

• 拆分类型定义，把组件入参Props和Context值类型分开：
  1. 修正Provider组件的Props类型，组件本身只需要接收children属性：

  export interface ReferralProviderProps {
    children: React.ReactNode;
  }
  

  2. 单独定义Context向下传递的值的类型，原来你写在ReferralProviderProps里的状态、方法类型都移到这里：

  export interface ReferralContextValue {
    getReferralData: (options: LegacyReferralSubscribeOptions) => Promise<void>;
    referralData: ReferralData | null;
    error: string | null;
    loading: boolean;
  }
  

• 给Context初始化补充对应类型，避免后续调用hook出现类型问题：

// 初始化时可根据需求补默认值，这里用类型断言适配初始无值的场景
const ReferralContext = createContext<ReferralContextValue>({} as ReferralContextValue);

• 修正完成后，你原来的Provider嵌套写法不需要任何改动，就可以正常编译运行，子组件通过useReferralContext()就能拿到全局传递的状态和方法。

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