React TypeScript+Wagmi开发NFT项目：string转`0x${string}`类型报错解决

你遇到的错误是因为Wagmi的useContractRead要求address参数必须是带0x前缀的十六进制字符串类型（0x${string}），而你的入参是普通string类型，TypeScript无法确认其格式是否合规，所以抛出类型不兼容的错误。以下是几种可行的解决方法：

1. 快速类型断言（适用于确定输入格式合法的场景） #

直接通过类型断言告诉TypeScript这个字符串符合0x${string}格式，适合你能保证传入的contractAddress一定是带0x前缀的合法地址的情况：

const { data, error } = useContractRead({
    address: contractAddress as `0x${string}`,
    contractInterface: erc721ABI,
    functionName: "balanceOf",
    args: [walletAddress as `0x${string}`], // 钱包地址也建议同步处理
});

或者在入参定义时就做断言：

const useNFTChecker = ({
    contractAddress,
    walletAddress,
}: {
    contractAddress: string as `0x${string}`;
    walletAddress: string as `0x${string}`;
}) => {
    // ... 后续代码
};

2. 带验证的格式转换（更安全） #

如果无法确保输入一定带0x前缀，或者想增加合法性校验，可以写一个工具函数来处理：

// 工具函数：确保地址带0x前缀并验证格式
function toValidHexAddress(address: string): `0x${string}` {
    let formattedAddress = address.trim();
    // 补全0x前缀
    if (!formattedAddress.startsWith('0x')) {
        formattedAddress = `0x${formattedAddress}`;
    }
    // 验证地址长度（以太坊地址标准长度为42位）
    if (formattedAddress.length !== 42) {
        throw new Error('Invalid contract address: length must be 42 characters');
    }
    // 验证是否为十六进制字符串
    if (!/^0x[0-9a-fA-F]+$/.test(formattedAddress)) {
        throw new Error('Invalid contract address: must be a hexadecimal string');
    }
    return formattedAddress as `0x${string}`;
}

然后在hook中使用：

const { data, error } = useContractRead({
    address: toValidHexAddress(contractAddress),
    contractInterface: erc721ABI,
    functionName: "balanceOf",
    args: [toValidHexAddress(walletAddress)],
});

3. 从源头约束参数类型（最严谨） #

直接修改hook的入参类型，要求调用方必须传入符合0x${string}格式的地址，从根源避免类型转换：

const useNFTChecker = ({
    contractAddress,
    walletAddress,
}: {
    contractAddress: `0x${string}`;
    walletAddress: `0x${string}`;
}) => {
    const { data, error } = useContractRead({
        address: contractAddress, // 无需转换，类型直接匹配
        contractInterface: erc721ABI,
        functionName: "balanceOf",
        args: [walletAddress],
    });

    // ... 后续代码
};

这种方式会让TypeScript在编译阶段就拦截不符合格式的输入，更符合TypeScript的类型安全理念。

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