Next.js中如何将props传入URL 实现按钮点击跳转OpenSea

问题原因 #

当前代码无法实现预期跳转，核心是两个错误：

• 双引号包裹的普通字符串不支持变量插值，写在字符串里的{props.id}会被当成普通静态文本，不会读取props中传入的tokenId值
• 目标URL缺少https://协议头，浏览器会把这段地址识别为当前站点下的相对路径，根本不会跳转到外部OpenSea网站

正确实现代码 #

推荐用ES6模板字符串写法拼接URL，注意：模板字符串必须用键盘左上角数字1旁的反引号（）包裹，不能用单/双引号，变量插值统一用${变量名}`格式：

// 固定配置可以抽成常量，后续改链/改合约不用翻业务逻辑
const OPENSEA_PATH_PREFIX = "https://testnets.opensea.io/assets/mumbai/";
const NFT_CONTRACT_ADDRESS = "0xb636c1a63c3b092a7c74304b1947b0162d08a1e4";

const handleOpenOpensea = () => {
  // 如果id是ethers/wagmi返回的BigNumber类型，先转成普通字符串避免格式错误
  const validTokenId = props.id?.toString() ?? "";
  const targetUrl = `${OPENSEA_PATH_PREFIX}${NFT_CONTRACT_ADDRESS}/${validTokenId}`;
  // 加noopener noreferrer是前端安全规范，避免新页面反向操作原页面
  window.open(targetUrl, "_blank", "noopener noreferrer");
};

如果不习惯模板字符串，也可以用原生字符串拼接实现，效果完全一致：

const targetUrl = "https://testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/" + props.id;
window.open(targetUrl, "_blank", "noopener noreferrer");

优化建议 #

• 可以把合约地址、OpenSea链前缀这类配置抽到Next.js环境变量中存储，后续切主网、换合约时只需要改环境变量，不用修改组件代码
• 跳转前可以加个简单的tokenId合法性校验，避免id为空时跳转到无效的OpenSea错误页

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