集成wagmi与WalletConnect遇报错：链格式需符合namespace:chainId

问题核心 #

错误提示chain [object Set] should be a string and conform to "namespace:chainId" format，说明传递给WalletConnect的链参数格式错误，且在SSR环境下出现了Set类型的链集合（而非预期的字符串或Chain对象数组）。

修复步骤 #

1. 规范Wagmi的Chains配置 #

确保初始化Wagmi Client时使用Chain对象数组（而非Set或纯数字），推荐直接使用wagmi内置的链定义：

import { createClient, WagmiProvider } from 'wagmi';
import { mainnet, goerli } from 'wagmi/chains';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

const walletConnectConnector = new WalletConnectConnector({
  options: {
    chains: [mainnet, goerli], // 使用wagmi预定义的Chain对象
    projectId: '你的WalletConnect项目ID',
    showQrModal: true,
  },
});

const client = createClient({
  autoConnect: true,
  connectors: [walletConnectConnector],
  chains: [mainnet, goerli], // 全局链配置同样用数组
});

2. 确保Wagmi仅在客户端初始化 #

SSR环境下，服务端无法处理浏览器专属的WalletConnect逻辑，需用@loadable/component将Wagmi相关代码隔离到客户端：

// 单独创建WagmiClient组件，仅在客户端加载
import loadable from '@loadable/component';

const WagmiClient = loadable(() => import('./components/WagmiClient'), {
  ssr: false, // 禁止服务端渲染该组件
});

// 在根页面中使用
export default function App({ children }) {
  return (
    <WagmiClient>
      {children}
    </WagmiClient>
  );
}

3. 避免使用Set存储链集合 #

如果代码中曾用Set管理链列表，需转换为数组后再传递给Wagmi：

// 错误示例：使用Set导致序列化异常
// const chainsSet = new Set([mainnet, goerli]);

// 正确示例：转为数组
const chainsArray = [mainnet, goerli];

const client = createClient({
  chains: chainsArray,
  // ...其他配置
});

4. 检查连接器的Chain格式 #

若手动指定链ID，需严格遵循"namespace:chainId"格式字符串：

const walletConnectConnector = new WalletConnectConnector({
  options: {
    chains: ['eip155:1', 'eip155:5'], // 以太坊主网和Goerli测试网
    projectId: '你的WalletConnect项目ID',
  },
});

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