TypeScript中使用React useContext解构Context提示属性不存在报错如何解决

问题根本原因 #

你在创建Web3Context时，指定的泛型类型是Web3 | null，且默认值传入了null。TypeScript 无法感知你的组件外层是否一定被Web3Provider包裹，所以它默认认为useContext(Web3Context)返回值的类型是联合类型Web3 | null，null类型上不存在nftContract属性，因此触发类型报错。

解决方案 #

方案1：非空断言（快速适配，确定外层一定包裹Provider时使用）

直接告诉 TypeScript 你可以保证取到的 Context 一定不为空，在useContext返回值后加!非空断言符即可：

const MintNFTForm = () => {
  const { nftContract } = useContext(Web3Context)!;
  // 后续业务逻辑
}

方案2：修改Context默认值，去除null类型

把Context的类型从Web3 | null改成纯Web3类型，给一个符合接口结构的默认空值，避免TS判定存在null可能：

// 修改Context创建代码
export const Web3Context = createContext<Web3>({
  gameContract: '',
  nftContract: '',
  provider: '',
  account: '',
  etherBalance: ''
});

修改后无需调整消费侧代码，TS不会再报该类型错误。

方案3：封装自定义消费Hook（推荐，兼顾类型安全和运行时报错提示）

封装一个专属的useWeb3钩子，内部做非空判断，既可以解决类型问题，还能在运行时检测到组件未被Provider包裹的异常场景：

// 在Context定义文件中新增这个钩子
export const useWeb3 = () => {
  const context = useContext(Web3Context);
  if (!context) {
    throw new Error('useWeb3 must be used within a Web3Provider');
  }
  return context;
}

消费侧直接使用自定义钩子即可：

const MintNFTForm = () => {
  const { nftContract } = useWeb3();
  // 后续业务逻辑
}

内容的提问来源于stack exchange，提问作者Adrian D.