Next.js Solana应用刷新页面后钱包断开连接问题咨询

你当前的Provider代码基础结构没有明显语法错误，刷新断开是以下几个常见原因导致，对应修复即可：

• 依赖版本不匹配
  所有@solana/wallet-adapter开头的包必须保持大版本一致，版本错位会导致autoConnect逻辑静默失效。执行以下命令统一升级所有相关依赖到最新兼容版本：

  npm install @solana/wallet-adapter-base@latest @solana/wallet-adapter-react@latest @solana/wallet-adapter-react-ui@latest @solana/wallet-adapter-wallets@latest
  

• React 18严格模式打断自动连接流程
  React 18开发环境下严格模式会执行两次组件挂载，WalletProvider自带的autoConnect属性触发的第一次连接会被第二次挂载中断，导致最终连接状态异常。
  修复方式是移除WalletProvider上的autoConnect属性，在Provider内部手动控制自动连接逻辑，修改后的完整Provider代码如下：

  import React, { FC, useMemo, useEffect, useState } from 'react';
  import { ConnectionProvider, WalletProvider, useWallet } from '@solana/wallet-adapter-react';
  import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
  import {
      GlowWalletAdapter,
      PhantomWalletAdapter,
      SlopeWalletAdapter,
      SolflareWalletAdapter,
      TorusWalletAdapter,
  } from '@solana/wallet-adapter-wallets';
  import {
      WalletModalProvider,
  } from '@solana/wallet-adapter-react-ui';
  import { clusterApiUrl } from '@solana/web3.js';
  
  require('@solana/wallet-adapter-react-ui/styles.css');
  
  const AutoConnectWrapper = ({ children }) => {
    const { autoConnect, connected, connecting } = useWallet();
    const [hasTriedConnect, setHasTriedConnect] = useState(false);
  
    useEffect(() => {
      if (hasTriedConnect || connected || connecting) return;
      autoConnect()
        .finally(() => setHasTriedConnect(true));
    }, [autoConnect, connected, connecting, hasTriedConnect]);
  
    return <>{children}</>;
  };
  
  export const WalletConnectionProvider = ({children}) => {
      const network = WalletAdapterNetwork.Devnet;
      const endpoint = useMemo(() => clusterApiUrl(network), [network]);
      const wallets = useMemo(
          () => [
              new PhantomWalletAdapter(),
              new GlowWalletAdapter(),
              new SlopeWalletAdapter(),
              new SolflareWalletAdapter({ network }),
              new TorusWalletAdapter(),
          ],
          [network]
      );
  
      return (
          <ConnectionProvider endpoint={endpoint}>
              <WalletProvider wallets={wallets}>
                  <AutoConnectWrapper>
                    <WalletModalProvider>
                        {children}
                    </WalletModalProvider>
                  </AutoConnectWrapper>
              </WalletProvider>
          </ConnectionProvider>
      );
  };
  
  export default WalletConnectionProvider
  

• 读取钱包状态时机过早
  钱包自动连接是异步流程，页面首次渲染时连接还未完成，此时同步调用getWallet拿到的必然是connected: false、publicKey: null的初始值。
  修复方式是不要在组件初始化阶段同步读取钱包状态，通过useWallet钩子监听connected、publicKey状态变化，等连接完成后再执行业务逻辑：

  const { connected, publicKey } = useWallet();
  useEffect(() => {
    if (connected && publicKey) {
      // 连接完成后再执行查询地址、拉取链上数据等逻辑
      console.log('当前连接地址：', publicKey.toBase58());
    }
  }, [connected, publicKey]);
  

• 钱包端授权设置限制
  部分钱包（比如Phantom）支持用户设置「访问站点时不自动连接」，如果用户开启了该选项，刷新后必须手动点击连接按钮才能建立连接，属于正常产品逻辑，无需额外处理。

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