使用ethers.js连接钱包失败问题求助

报错信息 #

evmAsk.js:7 Error: Unexpected error
    at Um.<anonymous> (evmAsk.js:7:4197)
    at Generator.next (<anonymous>)
    at s (evmAsk.js:1:1455)

涉事代码 #

import { useState } from "react";
import { ethers } from "ethers";

const Home = () => {
    const [walletAddress, setWalletAddress] = useState('');
    const [errorMessage, setErrorMessage] = useState('');

    const connectWallet = async () => {
        if (window.ethereum) {
            try {
                // Request account access
                await window.ethereum.request({ method: 'eth_requestAccounts' });

                // Create a new Web3 provider
                const provider = new ethers.providers.Web3Provider(window.ethereum);

                // Get the signer
                const signer = provider.getSigner();

                // Get the user's wallet address
                const address = await signer.getAddress();

                // Set the wallet address in state
                setWalletAddress(address);
                setErrorMessage(''); // Clear any previous error messages
            } catch (error) {
                console.error("Error connecting to MetaMask:", error);
                setErrorMessage("Failed to connect to MetaMask. Please try again.");
            }
        } else {
            alert('MetaMask is not installed. Please install it to use this app.');
        }
    };

    return (
        <div className="app flex flex-col items-center pt-7">
            <h1 className="">Connect wallet testing 123 (/≧▽≦)/</h1>
            <button className="border border-gray-300 p-2 rounded-lg" onClick={connectWallet}>
                Connect MetaMask Wallet
            </button>
            {walletAddress && (
                <p className="mt-4">Connected Wallet Address: {walletAddress}</p>
            )}
            {errorMessage && (
                <p className="mt-4 text-red-500">{errorMessage}</p>
            )}
        </div>
    );
};

export default Home;

排查与修复步骤 #

1. 检查ethers.js版本兼容性 #

如果使用的是ethers.js v6，原代码中的ethers.providers.Web3Provider已被废弃，需替换为ethers.BrowserProvider，同时getSigner()调用需要添加await：

// 替换原Provider和Signer相关代码
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();

2. 增强错误捕获细节 #

原错误处理仅打印笼统信息，补充错误代码和具体描述可精准定位问题（比如用户拒绝连接会返回code: 4001）：

catch (error) {
    console.error("Error code:", error.code, "Error message:", error.message);
    if (error.code === 4001) {
        setErrorMessage("您已拒绝连接请求，请重新尝试。");
    } else {
        setErrorMessage("连接MetaMask失败，请检查钱包状态后重试。");
    }
}

3. 验证MetaMask环境 #

• 确保MetaMask插件为最新版本，旧版本可能存在兼容性问题；
• 切换至Chrome/Brave等主流Web3兼容浏览器，避免使用小众浏览器；
• 检查MetaMask是否已授权当前网站访问权限，可在钱包设置中重置网站权限后重新尝试。

4. 简化代码逐步排查 #

先剥离后续逻辑，仅测试基础连接请求，确认是否是后续步骤导致的错误：

const connectWallet = async () => {
    if (window.ethereum) {
        try {
            const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
            console.log("Connected accounts:", accounts);
            setWalletAddress(accounts[0]);
        } catch (error) {
            console.error("Error details:", error);
        }
    }
};

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