Next.js集成WalletConnect Web3Modal与Wagmi的类型及运行错误问题

问题1：WagmiConfig类型不兼容错误 #

问题原因 #

你应该是把createWeb3Modal返回的完整对象直接传给了<WagmiConfig>的config属性。createWeb3Modal会返回包含queryClient的扩展配置对象，但<WagmiConfig>只接受纯wagmi Config类型，导致类型冲突。

解决方案 #

调用createWeb3Modal时，解构出纯config字段再传入：

import { createWeb3Modal } from '@web3modal/wagmi/react'
import { WagmiConfig, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'

// 先创建wagmi基础配置
const wagmiBaseConfig = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: publicProvider(),
    [sepolia.id]: publicProvider(),
  },
})

// 解构出纯config传入WagmiConfig
const { config } = createWeb3Modal({
  wagmiConfig: wagmiBaseConfig,
  projectId: '你的WalletConnect项目ID',
  enableAnalytics: false,
})

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <WagmiConfig config={config}>
          {children}
        </WagmiConfig>
      </body>
    </html>
  )
}

如果仍有类型告警，可手动指定类型：

import type { Config } from 'wagmi'

const { config } = createWeb3Modal(...) as { config: Config }

问题2：wagmi chains.js的export *不支持错误 #

问题原因 #

Next.js 13 App Router的客户端组件禁止使用export *导出的模块，而wagmi的chains包默认采用这种导出方式，触发了客户端边界的报错。

解决方案 #

放弃通配符导入所有链，改为命名导入你实际需要的链：

// 错误写法
import * as chains from 'wagmi/chains'

// 正确写法
import { mainnet, sepolia, goerli } from 'wagmi/chains'

之后在wagmi的createConfig中直接使用这些命名导入的链即可。

另外注意：如果你的Layout组件包含Web3Modal交互逻辑（比如连接按钮），需要在文件顶部加上'use client'指令——因为Next.js 13 App Router默认是服务器组件，而Web3Modal依赖客户端环境运行。

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