React Context类型错误：'number | IContexto'不存在state/setState属性

1. 修正Context的类型定义与初始值 #

你在MyContext.ts里错误地将Context的类型设为IContexto | number，初始值用了0，但实际Provider提供的是符合IContexto结构的对象，这导致TypeScript无法确定useContext返回的是数字还是上下文对象，从而触发类型错误。

修改后的MyContext.ts代码：

import React, { useState , createContext, SetStateAction } from 'react'

type StateType = {
  state: number
}

// 移除属性的可选标记，因为Provider会确保这两个属性存在
interface IContexto {
  state: StateType | null;
  setState: React.Dispatch<SetStateAction<StateType | null>>;
}

// 修正Context类型为IContexto，初始值要匹配该类型
export const PathContext = createContext<IContexto>({ 
  state: null, 
  setState: () => {} 
})

interface IProps{
  children?: JSX.Element|JSX.Element[];
}

const MyContext: React.FC<IProps> = ({ children }:IProps ) => {
const [ state, setState ] = useState<StateType | null >(null);

  return (
    <PathContext.Provider
      value={{ state, setState }  }
    >
      {children}
    </PathContext.Provider>
  );
};

export default MyContext;

2. 修正Percentual.tsx中的类型不匹配问题 #

当前AplicaPercentual传递的是number类型，但setState需要的是StateType | null结构的值，需要调整参数处理逻辑：

修改后的Percentual.tsx代码：

import React, { useContext } from "react";
import { PathContext } from '../contexto/MyContext'

type Tipo = {
    comissao?: number;
}

const Percentual: React.FC<Tipo> = ( props: Tipo ) => {
    // 现在类型明确为IContexto，解构不会报错
    const { state, setState } = useContext(PathContext)

    // 调整参数处理，构造符合StateType要求的对象
    function AplicaPercentual(valor: number | undefined){
        if (valor !== undefined) {
            setState({ state: valor });
        } else {
            setState(null);
        }
    }

    return (
        <>
            {/* 处理state为null的情况，避免渲染错误 */}
            { state ? state.state : '未设置值' }
            <button onClick={ ()=>{ AplicaPercentual(props.comissao) } }> 
                { props.comissao || '0' } 
            </button>
        </>
    )
}
export default Percentual

关键说明 #

• 移除Context类型中的number分支：你的业务场景中上下文始终是包含state和setState的对象，不需要数字类型的备选值。
• 调整IContexto接口：去掉属性的可选标记，确保Provider提供的对象必然包含这两个属性，让TypeScript确认解构的安全性。
• 修正setState参数格式：setState需要接收StateType结构的对象（或null），不能直接传递数字，必须包装成{ state: valor }的形式。

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