TypeScript中使用wagmi的useContractReads传参报错求助

核心方案 #

显式指定contracts数组的类型为wagmi内置的UseContractReadsConfig['contracts']，让TypeScript正确识别不同合约函数的参数要求。

修改后的代码 #

import { abi } from "../constants/CryptoDevsToken";
import { useContractReads, type UseContractReadsConfig } from "wagmi";

export function useCryptoDevsToken(address: string | undefined) {
  const configCryptoDevsToken = {
    address: "CRYPTODEVSTOKEN_GOERLI_ADDRESS",
    abi: abi,
  };
  // 显式指定contracts类型，匹配useContractReads的要求
  const contracts: UseContractReadsConfig['contracts'] = [
    {
      ...configCryptoDevsToken,
      functionName: "maxSupply",
    },
  ];
  if (address) {
    contracts.push({
      ...configCryptoDevsToken,
      functionName: "balanceOf",
      args: [address],
    });
  }
  const { data } = useContractReads({ contracts });
  return { data };
}

问题原因 #

初始代码中，TypeScript自动推断的contracts数组类型过于宽泛（仅识别functionName: string等通用字段），无法区分不同合约函数是否需要args参数。而wagmi的UseContractReadsConfig['contracts']类型已经和你的ABI做了关联，能精确校验每个函数的参数结构，包括args的存在性和类型。

额外优化（可选） #

如果想让类型推断更精准，也可以为configCryptoDevsToken指定基于ABI的合约类型：

import { abi } from "../constants/CryptoDevsToken";
import { useContractReads, type UseContractReadsConfig } from "wagmi";

// 基于ABI生成合约类型
type CryptoDevsTokenContract = {
  address: string;
  abi: typeof abi;
};

const configCryptoDevsToken: CryptoDevsTokenContract = {
  address: "CRYPTODEVSTOKEN_GOERLI_ADDRESS",
  abi: abi,
};

这样TypeScript会更严格地校验functionName和args是否匹配ABI定义。

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