Solidity合约uint8返回值在JavaScript中读取失败求助

问题背景 #

Solidity合约可创建NFT并存入数组，首个NFT的tokenId为0。点击HTML中「GET DATA FROM CONTRACT」按钮调用readContract(0)函数，期望获取该NFT的uint8类型Power值（0-100随机生成），但执行到const power = await window.contract.methods.getNFTPower(tokenId).call();后无后续输出。已确认合约与JavaScript连接正常（connectContract函数验证通过，ABI及地址无问题）。

相关代码 #

Solidity合约核心代码 #

contract NFTGame is ERC721, Ownable {
    using SafeMath for uint256;

    address public erc20TokenAddress;

    struct NFTAttributes {
        uint8 power;
        bool inArena;
    }

    NFTAttributes[] public nfts;

    constructor(address _erc20TokenAddress) ERC721("FightArena", "FIGA") payable {
        erc20TokenAddress = _erc20TokenAddress;
    }

    function createNFT() external {
        uint8 power = uint8(uint256(keccak256(abi.encodePacked(block.timestamp, msg.sender))) % 101);  // 生成0-100的随机数
        nfts.push(NFTAttributes(power, false));
        uint256 tokenId = nfts.length - 1;
        _mint(msg.sender, tokenId);
    }

    function getNFTPower(uint256 tokenId) public view returns (uint8) {
        require(_exists(tokenId), "ID del token non valido");
        return uint8(nfts[tokenId].power);
    }
}

HTML/JavaScript核心代码 #

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.2.7-rc.0/web3.min.js"></script>
</head>
<body>
    <button onclick="connectMetamask()">CONNECT METAMASK</button> <br>
    <p id="accountArea"></p>
    <button onclick="connectContract()">CONNECT TO CONTRACT</button> <br>
    <p id="contractArea"></p>
    <button onclick="readContract(0)">GET DATA FROM CONTRACT</button> <br>
    <p id="dataArea"></p> <!-- 0是createNFT函数铸造的首个NFT的tokenId -->
</body>
<script>
const readContract = async (tokenId) => {
    const power = await window.contract.methods.getNFTPower(tokenId).call();
    const powerString = power.toString(); 
    document.getElementById("dataArea").innerHTML = "Power of NFT " + tokenId + ": " + powerString;
}
</script>

排查提示 #

• 校验ABI方法匹配度：确认合约编译生成的ABI中，getNFTPower的输入参数为uint256、返回值为uint8。Web3.js对类型严格敏感，哪怕是uint8和uint256的差异都可能导致调用失败。
• 添加错误捕获定位问题：给readContract函数加上try-catch块，在浏览器控制台（F12）查看具体错误信息，比如tokenId不存在、链ID不匹配、合约未部署到当前网络等：

  const readContract = async (tokenId) => {
      try {
          const power = await window.contract.methods.getNFTPower(tokenId).call();
          const powerString = power.toString(); 
          document.getElementById("dataArea").innerHTML = "Power of NFT " + tokenId + ": " + powerString;
      } catch (err) {
          console.error("调用失败详情:", err);
          document.getElementById("dataArea").innerHTML = "读取失败: " + err.message;
      }
  }
  

• 验证NFT铸造状态：调用合约的balanceOf方法检查当前地址是否持有tokenId=0的NFT，或直接调用nfts(0)读取结构体数据，确认power值是否已正确存入链上。
• 升级Web3版本：当前使用的web3 1.2.7-rc.0为测试版，存在潜在bug，建议升级到稳定版本（如1.10.x）再测试。
• 确认链上交易状态：如果在测试网操作，确保铸造NFT的交易已被区块打包，避免因交易未确认导致读取不到数据。
• 检查require异常触发：合约中getNFTPower的require(_exists(tokenId))会在tokenId不存在时抛出异常，通过try-catch可捕获到该错误信息（如"ID del token non valido"），以此判断是否是tokenId无效的问题。

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