未安装MetaMask时React应用无法渲染，控制台报错window.ethereum未定义

问题出在代码直接访问了window.ethereum对象，但当浏览器未安装MetaMask时，这个对象不存在，导致抛出未定义错误，进而让整个React应用崩溃黑屏。以下是几种可行的解决方法：

• 先检查钱包是否存在再执行逻辑
  在所有涉及MetaMask的操作前，先判断window.ethereum是否存在，避免直接访问未定义对象：

  import { useEffect } from 'react';
  import { ethers } from 'ethers';
  
  function WalletComponent() {
    useEffect(() => {
      if (window.ethereum) {
        // 安全初始化MetaMask提供者
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        // 后续操作：获取账户、监听链变化等
        provider.listAccounts().then(accounts => {
          console.log('已连接账户:', accounts);
        });
      } else {
        // 给用户明确提示
        console.log('请安装MetaMask钱包以使用此功能');
      }
    }, []);
  
    return <div>钱包组件内容</div>;
  }
  

• 使用可选链操作符规避错误
  对于需要调用window.ethereum方法的场景，用?.可选链操作符，这样当对象不存在时只会返回undefined，不会抛出错误：

  // 安全请求账户授权
  const requestAccounts = async () => {
    try {
      const accounts = await window.ethereum?.request({ method: 'eth_requestAccounts' });
      if (accounts) {
        console.log('授权账户:', accounts);
      } else {
        alert('请安装MetaMask钱包');
      }
    } catch (err) {
      console.error('请求账户失败:', err);
    }
  };
  

• 添加错误边界防止应用全局崩溃
  给React应用添加错误边界组件，这样即使某个依赖MetaMask的组件出错，整个应用也不会黑屏，而是显示友好的 fallback 界面：

  class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError() {
      return { hasError: true };
    }
  
    componentDidCatch(error) {
      console.error('应用错误:', error);
    }
  
    render() {
      if (this.state.hasError) {
        return <div style={{ textAlign: 'center', marginTop: '50px' }}>
          <h2>加载出错了</h2>
          <p>请安装MetaMask钱包后刷新页面重试</p>
        </div>;
      }
      return this.props.children;
    }
  }
  
  // 在根组件中包裹应用
  ReactDOM.render(
    <ErrorBoundary>
      <App />
    </ErrorBoundary>,
    document.getElementById('root')
  );
  

• 初始化时检测钱包状态，提前展示引导界面
  在应用入口组件中先检测钱包是否存在，不存在则直接展示引导安装的界面，不渲染依赖钱包的内容：

  import { useState, useEffect } from 'react';
  
  function App() {
    const [hasMetaMask, setHasMetaMask] = useState(false);
  
    useEffect(() => {
      setHasMetaMask(!!window.ethereum);
    }, []);
  
    if (!hasMetaMask) {
      return <div className="wallet-guide">
        <h3>需要MetaMask钱包</h3>
        <p>此应用依赖MetaMask钱包运行，请先安装后再使用。</p>
      </div>;
    }
  
    return <div className="app-container">
      {/* 正常应用内容 */}
    </div>;
  }
  

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