Next.js中初始化const遇window未定义，修复后变量超作用域如何解决

方案1：提前声明变量并在客户端环境赋值 #

用let在if块外部提前声明变量，既能避免服务端window未定义的报错，又能让后续代码访问到该变量：

let web3Modal;
if (typeof window !== "undefined") {
  web3Modal = new Web3Modal({
    network: "mainnet",
    cacheProvider: true,
    providerOptions,
  });
}

// 后续使用前记得判断变量是否存在，防止服务端渲染阶段报错
if (web3Modal) {
  // 执行相关操作逻辑
}

方案2：React组件中用useEffect + useRef（推荐） #

如果是在函数组件内处理，useEffect只会在客户端执行，无需额外判断window；搭配useRef保存实例，还能避免组件重渲染导致变量丢失：

import { useEffect, useRef } from 'react';

function WalletConnectComponent() {
  const web3ModalRef = useRef(null);

  useEffect(() => {
    // 此处代码仅在客户端运行，直接初始化实例
    web3ModalRef.current = new Web3Modal({
      network: "mainnet",
      cacheProvider: true,
      providerOptions,
    });
  }, []);

  // 示例：在点击事件中使用实例
  const handleConnect = async () => {
    if (!web3ModalRef.current) return;
    const provider = await web3ModalRef.current.connect();
    // 后续业务逻辑
  };

  return <button onClick={handleConnect}>连接钱包</button>;
}

方案3：全局挂载（按需使用，不推荐） #

如果需要在多个模块复用实例，可以挂载到window上，但要注意全局变量污染问题：

if (typeof window !== "undefined") {
  window.web3Modal = new Web3Modal({
    network: "mainnet",
    cacheProvider: true,
    providerOptions,
  });
}

// 后续使用时
if (window.web3Modal) {
  // 执行操作
}

内容的提问来源于stack exchange，提问作者Furkan Öztürk