NextJS NFT站点：如何仅在合约Mint成功后跳转至成功页

你的核心问题是没有等待合约交易的异步执行结果，直接同步执行了跳转逻辑。Web3合约调用属于异步操作，safeMint() 只是发起交易请求，不会立刻返回最终执行结果，因此需要通过异步等待+错误处理来精准控制跳转时机。

方案1：使用async/await + try-catch（通用适配ethers.js等库） #

将 mintToken 改为异步函数，等待交易提交并完成区块链确认后再执行跳转，同时捕获异常处理失败场景：

const mintToken = async () => {
  try {
    // 发起铸造交易并等待交易响应
    const txResponse = await safeMint?.();
    if (!txResponse) return;

    // 等待区块链确认交易（参数1代表等待1个区块确认，可根据需求调整）
    await txResponse.wait(1);

    // 交易确认成功后，才执行跳转
    router.push('/success');
  } catch (error) {
    // 处理铸造失败的情况，比如打印错误、提示用户
    console.error('NFT铸造失败:', error);
    // 这里可以添加前端错误提示，比如弹出Toast或提示框
  }
};

方案2：如果使用Wagmi的useContractWrite钩子 #

若你的 safeMint 是通过Wagmi的 useContractWrite 生成的，可直接利用钩子提供的回调函数处理成功/失败分支：

import { useContractWrite } from 'wagmi';

// 初始化合约写入钩子
const { write: safeMint } = useContractWrite({
  address: '你的NFT合约地址',
  abi: '你的合约ABI',
  functionName: 'safeMint',
  // 其他配置...
});

const mintToken = () => {
  safeMint?.({
    // 交易成功提交并确认后的回调
    onSuccess: async (txResponse) => {
      await txResponse.wait(1);
      router.push('/success');
    },
    // 交易失败时的回调
    onError: (error) => {
      console.error('NFT铸造失败:', error);
    }
  });
};

关键说明 #

• 为什么要等待txResponse.wait()？：调用safeMint()只是将交易发送到以太坊网络，此时交易还未被矿工打包确认，仍存在失败风险（比如Gas不足被退回、合约执行报错）。等待区块确认后，才能确保交易真正成功落地。
• 错误处理的必要性：通过try-catch或onError回调，可以在用户拒绝交易、交易失败时阻止跳转，并给出明确提示，避免误导用户。

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