基于Polygon的P2P支付项目TypeScript索引错误及合约字段填充问题

核心问题 #

基于Polygon网络开发P2P支付系统时，Truffle生成的PaymentToken.json中networks字段为空，导致TypeScript报错，且无法加载Mumbai测试网（链ID 80002）的合约实例。

错误信息 #

Element implicitly has an 'any' type because expression of type '"80002"' can't be used to index type '{}'.
Property '80002' does not exist on type '{}'.

相关代码片段 #

加载钱包的核心代码：

const loadWallet = async () => {
      if (window.ethereum) {
        window.web3 = new Web3(window.ethereum);
        await window.ethereum.enable();
        const web3 = window.web3;
        var allAccounts = await web3.eth.getAccounts();
        setAccount(allAccounts[0]);
  
        // 错误发生处
        const paymentTokenData: any = PaymentToken.networks['80002'];
        if (paymentTokenData) {
          var paymentTokenInstance = new web3.eth.Contract(
            PaymentToken.abi,
            paymentTokenData.address
          );
          setPaymentToken(paymentTokenInstance);
          var bal = await paymentTokenInstance.methods
            .balanceOf(allAccounts[0])
            .call();
          setBalance(bal);
        } else {
          window.alert("TestNet not found");
        }
        setLoading(false);
      } else {
        window.alert("Non-Eth browser detected. Please consider using MetaMask.");
      }
}

PaymentToken.json的空networks字段：

"networks": {},
  "schemaVersion": "3.4.16",
  "updatedAt": "2024-07-05T12:57:25.623Z",

合约代码：

// SPDX-License-Identifier: GPL-3.0
pragma solidity ^0.8.19;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract PaymentToken is ERC20 {
    address public owner;

    constructor() ERC20("Payment Token", "Pay") {
        owner = msg.sender;
        _mint(msg.sender, 100000 * 10**18);
    }

    function mint(address to, uint256 amount) external {
        require(msg.sender == owner, "Only owner can mint");
        _mint(to, amount);
    }
}

解决方法 #

方法1：通过Truffle部署自动填充networks #

这是规范做法，部署后Truffle会自动更新ABI文件的networks字段：

1. 修改truffle-config.js，添加Mumbai测试网配置：

module.exports = {
  networks: {
    mumbai: {
      url: "https://rpc-mumbai.maticvigil.com/", // 可替换为其他Mumbai RPC节点
      accounts: ["你的部署钱包私钥"], // 建议用环境变量存储私钥，避免泄露
      chainId: 80002
    }
  },
  compilers: {
    solc: {
      version: "0.8.19" // 与合约指定的Solidity版本一致
    }
  }
};

2. 执行部署命令：

truffle migrate --network mumbai

部署完成后，PaymentToken.json的networks会自动生成80002的条目，包含合约地址等信息。

方法2：手动填充networks字段 #

如果已经手动部署合约到Mumbai测试网，直接修改PaymentToken.json：

"networks": {
  "80002": {
    "address": "你的合约在Mumbai测试网的部署地址",
    "transactionHash": "部署交易的哈希（可选，可省略）"
  }
},

额外：解决TypeScript类型报错 #

填充networks字段后，类型报错会自动消失。如果需要临时规避类型检查，可给PaymentToken添加类型定义：

interface NetworkData {
  address: string;
}

interface PaymentTokenABI {
  abi: any[];
  networks: Record<string, NetworkData>;
}

const PaymentToken: PaymentTokenABI = require('../abis/PaymentToken.json');

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