如何在Wagmi异步合约部署的Catch分支中使用强类型错误？

问题代码 #

import { useDeployContract } from 'wagmi';

function Component() {
  const { deployContractAsync } = useDeployContract();

  async function handleClick() {
    try {
      const txnHash = await deployContractAsync({/* 合约部署参数 */});
    } catch (e) {
      // 这里的e没有强类型提示，如何使用Wagmi提供的错误类型？
    }
  }

  return (
    <button onClick={handleClick}>
      click me
    </button>
  )
}

问题：Wagmi文档提到useDeployContract返回的error是强类型的，但无法在catch分支中直接访问该变量，想知道如何给catch里的错误加上Wagmi的类型定义。

解决方案 #

1. 直接类型断言（快速实现） #

Wagmi为每个Hook导出了对应的错误类型，useDeployContract对应的错误类型是DeployContractError。你可以直接导入该类型，并在catch中将错误断言为该类型：

import { useDeployContract, DeployContractError } from 'wagmi';

function Component() {
  const { deployContractAsync } = useDeployContract();

  async function handleClick() {
    try {
      const txnHash = await deployContractAsync({/* 合约部署参数 */});
    } catch (e) {
      const deployError = e as DeployContractError;
      // 现在deployError拥有完整的类型提示，比如code、message等字段
      console.error('部署失败:', deployError.code, deployError.message);
    }
  }

  return <button onClick={handleClick}>click me</button>;
}

2. 类型守卫（严谨判断） #

如果需要确保错误确实是Wagmi的部署错误，可以编写一个类型守卫函数，在运行时验证错误结构，同时让TypeScript自动推断类型：

import { useDeployContract, DeployContractError } from 'wagmi';

// 类型守卫函数，判断错误是否为DeployContractError
function isDeployContractError(error: unknown): error is DeployContractError {
  return (
    typeof error === 'object' &&
    error !== null &&
    'code' in error &&
    'message' in error
  );
}

function Component() {
  const { deployContractAsync } = useDeployContract();

  async function handleClick() {
    try {
      const txnHash = await deployContractAsync({/* 合约部署参数 */});
    } catch (e) {
      if (isDeployContractError(e)) {
        // 这里e会被自动推断为DeployContractError类型
        console.error('Wagmi部署错误:', e.code, e.message);
      } else {
        // 处理其他非Wagmi类型的错误
        console.error('未知错误:', e);
      }
    }
  }

  return <button onClick={handleClick}>click me</button>;
}

3. 利用Hook的错误状态（组件层面处理） #

你也可以通过useDeployContract返回的error和isError状态来处理错误，这种方式不需要在catch中处理类型，但需要监听状态变化：

import { useEffect } from 'react';
import { useDeployContract } from 'wagmi';

function Component() {
  const { deployContractAsync, error, isError } = useDeployContract();

  // 监听错误状态变化
  useEffect(() => {
    if (isError && error) {
      // 这里的error是强类型的DeployContractError
      console.error('部署失败:', error.code, error.message);
    }
  }, [isError, error]);

  async function handleClick() {
    try {
      const txnHash = await deployContractAsync({/* 合约部署参数 */});
    } catch {} // 仅捕获异常，具体错误由useEffect处理
  }

  return <button onClick={handleClick}>click me</button>;
}

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