Web3-React使用WalletConnect连接后useWeb3React未设置active与account问题

问题根因 #

该问题90%以上是WalletConnect连接器初始化配置不规范、链ID不匹配或版本兼容问题导致，Injected方式能正常连接说明web3-react核心实例配置无问题，问题仅出在WalletConnect连接器侧。

修复步骤 #

• 1、规范WalletConnect连接器初始化配置，必须显式指定对应链的ID和RPC节点，不可缺省：

import { WalletConnectConnector } from '@web3-react/walletconnect-connector'

export const walletConnectConnector = new WalletConnectConnector({
  // 替换为你的项目实际支持的链ID，示例为主网ID 1
  chainId: 1,
  // 必须配置对应链的可用RPC节点
  rpc: {
    1: 'https://mainnet.infura.io/v3/替换为你的Infura项目ID'
  },
  qrcode: true
})

• 2、调整连接器激活逻辑，激活时传入第三个参数为true，强制触发状态同步：

import { useWeb3React } from '@web3-react/core'

function App() {
  const { activate, account, active } = useWeb3React()

  const handleConnect = async () => {
    try {
      // 连接前清理历史WalletConnect缓存，避免旧连接影响状态
      if(window.localStorage.getItem('walletconnect')) {
        WalletConnectConnector.clearWalletConnectCache()
      }
      await activate(walletConnectConnector, undefined, true)
    } catch (err) {
      console.error('WalletConnect连接失败：', err)
    }
  }

  return <button onClick={handleConnect}>连接WalletConnect</button>
}

• 3、确认移动端钱包扫码时选中的链，和你配置的chainId完全一致，链ID不匹配时web3-react会静默忽略状态更新，不会抛出可见报错。
• 4、若使用web3-react v8版本，需调整连接器导入路径为@web3-react/walletconnect-v2，参数结构也对应v2版本规范调整。

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