扫描Wallet Connect二维码后Web3 Modal及Sign Client报错：No matching key

我编写了通过Web3Modal独立客户端连接以太坊主网的基础代码，但扫描Wallet Connect二维码后触发报错：Error: No matching key. pairing: undefined。已参考相关教程但问题未解决，项目已部署。

报错截图：

原代码如下：

import SignClient from "@walletconnect/sign-client";
import { Web3Modal } from "@web3modal/standalone";
import { useEffect, useState } from "react";


const projectId = "CAN NOT WRITE KEY HERE";


const web3Modal = new Web3Modal({
  projectId: projectId,
  standaloneChains: ["eip155:1"],
});

export default function HomePage() {
  const [signClient, setSignClient] = useState(undefined);

  // 初始化签名客户端
  async function onInitializeSignClient() {
    const client = await SignClient.init({
      projectId: projectId,
    });
    setSignClient(client);
  }

  // 发起连接并将配对URI传入模态框
  async function onOpenModal() {
    if (signClient) {
      const namespaces = {
        eip155: {
          methods: ["eth_sendTransaction"],
          chains: ["eip155:1"],
          events: ["connect", "disconnect"],
        },
      };
      const { uri, approval } = await signClient.connect({
        requiredNamespaces: namespaces,
      });
      console.log(uri);
      if (uri) {
        try {
          await web3Modal.openModal({
            uri,
            standaloneChains: namespaces.eip155.chains,
          });
          console.log(namespaces.eip155.chains);
          await approval();
          console.log(22222);
          web3Modal.closeModal();
        } catch (error) {
          console.log("Eeee", error);
        }
      }
    }
  }

  useEffect(() => {
    if (!signClient) {
      onInitializeSignClient();
    }
  }, []);

  return signClient ? (
    <button onClick={onOpenModal}>Connect Wallet</button>
  ) : (
    "Initializing..."
  );
}

问题原因与修复方案 #

核心问题

1. Web3Modal实例提前初始化：在组件外部初始化Web3Modal，导致其与内部的SignClient实例状态不共享，配对密钥无法匹配。
2. 连接流程时序错误：await web3Modal.openModal()会阻塞代码执行，但Web3Modal的扫码交互不需要await，导致approval()提前触发时配对未完成。
3. Namespaces事件配置错误：EIP-155规范中，合法事件应为["chainChanged", "accountsChanged"]，而非["connect", "disconnect"]，这会导致命名空间校验失败。

修复后的完整代码

import SignClient from "@walletconnect/sign-client";
import { Web3Modal } from "@web3modal/standalone";
import { useEffect, useState } from "react";

const projectId = "你的合法Project ID";

export default function HomePage() {
  const [signClient, setSignClient] = useState(undefined);
  const [web3Modal, setWeb3Modal] = useState(undefined);

  // 同步初始化SignClient和Web3Modal
  async function initializeClients() {
    const client = await SignClient.init({
      projectId: projectId,
    });
    const modal = new Web3Modal({
      projectId: projectId,
      standaloneChains: ["eip155:1"],
    });
    setSignClient(client);
    setWeb3Modal(modal);
  }

  async function onOpenModal() {
    if (!signClient || !web3Modal) return;

    const namespaces = {
      eip155: {
        methods: ["eth_sendTransaction", "eth_accounts"],
        chains: ["eip155:1"],
        events: ["chainChanged", "accountsChanged"],
      },
    };

    try {
      const { uri, approval } = await signClient.connect({
        requiredNamespaces: namespaces,
      });

      if (uri) {
        // 打开模态框，无需await，让用户完成扫码操作
        web3Modal.openModal({
          uri,
          standaloneChains: namespaces.eip155.chains,
        });

        // 等待钱包确认连接，完成配对后再关闭模态框
        const session = await approval();
        console.log("连接成功，会话信息:", session);
        web3Modal.closeModal();
      }
    } catch (error) {
      console.error("连接失败:", error);
      web3Modal.closeModal();
    }
  }

  useEffect(() => {
    initializeClients();
  }, []);

  return signClient && web3Modal ? (
    <button onClick={onOpenModal}>Connect Wallet</button>
  ) : (
    "Initializing..."
  );
}

额外检查项

• 确保projectId是从WalletConnect Dashboard获取的有效ID，未过期或被禁用。
• 清除浏览器本地存储中的WalletConnect配对记录，避免旧数据干扰新连接。
• 确认使用的钱包应用为最新版本，旧版本可能对WalletConnect V2协议支持不完善。

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