Next JS中带查询参数时Wagmi useSigner Hook失效问题

问题根源 #

带查询参数的路由会触发NextJS页面重新渲染，但Wagmi的签名器状态未及时同步——要么是路由变化时钱包会话恢复延迟，要么是Wagmi配置未正确适配NextJS的路由逻辑。

具体解决步骤 #

1. 修正Wagmi客户端的路由配置 #

在_app.tsx中，必须使用Wagmi的Next路由适配器，同时开启自动连接确保页面加载时恢复钱包会话：

import { WagmiConfig, createConfig, configureChains } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { connectorsForWallets } from '@rainbow-me/rainbowkit';
import { rainbowWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets';
import { NextRouterAdapter } from 'wagmi/adapters/next-router';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, polygon],
  [publicProvider()]
);

const connectors = connectorsForWallets([
  {
    groupName: '常用钱包',
    wallets: [rainbowWallet({ chains }), metaMaskWallet({ chains })],
  },
]);

const config = createConfig({
  autoConnect: true, // 关键：开启自动恢复钱包连接会话
  connectors,
  publicClient,
  webSocketPublicClient,
  router: new NextRouterAdapter(), // 适配NextJS路由变化
});

2. 优化页面中useSigner的使用逻辑 #

不要仅监听路由参数，需结合Wagmi的useAccount状态，等钱包确认连接后再获取签名器：

import { useSigner, useAccount } from 'wagmi';
import { useEffect, useState } from 'react';

export default function Home() {
  const { isConnected } = useAccount();
  const { data: signer } = useSigner();
  const [currentSigner, setCurrentSigner] = useState(signer);

  useEffect(() => {
    // 钱包已连接且签名器存在时更新状态
    if (isConnected && signer) {
      setCurrentSigner(signer);
    }
  }, [isConnected, signer]);

  return (
    <div>
      <h1>签名器状态</h1>
      {isConnected ? (
        <p>签名器：{currentSigner ? '已加载' : '加载中...'}</p>
      ) : (
        <p>请连接你的钱包</p>
      )}
      {/* 放置Rainbow Kit连接按钮 */}
    </div>
  );
}

3. 检查Rainbow Kit的Provider包裹顺序 #

确保RainbowKitProvider嵌套在WagmiConfig内部，且正确传入chains参数：

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import '@rainbow-me/rainbowkit/styles.css';

function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig config={config}>
      <RainbowKitProvider chains={chains}>
        <Component {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

export default MyApp;

4. 临时排查：禁用页面静态优化 #

若上述方案无效，可给页面添加getServerSideProps，强制每次请求都初始化页面状态：

export const getServerSideProps = async () => {
  return { props: {} };
};

核心要点 #

• autoConnect: true是恢复钱包会话的核心，带查询参数的路由易出现会话恢复延迟，必须通过Next路由适配器让Wagmi感知路由变化。
• 不要单独依赖路由参数监听，要以钱包连接状态（isConnected）为判断标准，确保签名器加载完成后再执行后续操作。

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