Next.js构建报错ReferenceError: window is not defined求助

问题背景 #

构建Next.js应用时遭遇ReferenceError: window is not defined错误，尽管已在首页Hero组件添加'use client'指令。本地运行时图片可正常渲染，但构建流程失败。排查至仅保留该组件仍报错，尝试过设置useState默认路径、替换为普通img标签，均未解决问题。

Hero组件代码 #

"use client";
import React, { useEffect, useState } from "react";
import { ref, getDownloadURL } from "firebase/storage";
import { storage } from "./firebase"; // 按需调整导入路径
import Image from "next/image";

const Hero = () => {
    const [bgImageUrl, setBgImageUrl] = useState("");

    useEffect(() => {
        const fetchImage = async () => {
            const storageRef = ref(storage, "/Hero.jpg"); // 按需更新路径
            try {
                const url = await getDownloadURL(storageRef);
                setBgImageUrl(url);
            } catch (error) {
                console.error("从Firebase获取图片出错:", error);
            }
        };

        fetchImage();
    }, []);

    return (
        <>
            {bgImageUrl && (
                <Image src={bgImageUrl} alt="Hero图片" fill={true} />
            )}
        </>
    );
};

export default Hero;

错误栈信息 #

ReferenceError: window is not defined
at /home/cjbellmyer/code/green_country/.next/server/app/page.js:512:5749
at 4860 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:512:16127)
at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127)
at 7586 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:848:47)
at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127)
at 9165 (/home/cjbellmyer/code/green_country/.next/server/app/page.js:512:2954)
at t (/home/cjbellmyer/code/green_country/.next/server/webpack-runtime.js:1:127)
at F (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94693)
at j (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:93244)
at rP (/home/cjbellmyer/code/green_country/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33905)
Generating static pages (4/4)

Export encountered errors on following paths:
/page: /

解决方案 #

1. 动态导入Firebase Storage依赖 #

问题根源是Firebase Storage的初始化代码在服务器端执行时访问了window对象。将Firebase相关模块的导入移到useEffect内部，确保仅在客户端运行：

"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";

const Hero = () => {
    const [bgImageUrl, setBgImageUrl] = useState("");

    useEffect(() => {
        const fetchImage = async () => {
            // 动态导入Firebase模块
            const { ref, getDownloadURL } = await import("firebase/storage");
            const { storage } = await import("./firebase");
            
            const storageRef = ref(storage, "/Hero.jpg");
            try {
                const url = await getDownloadURL(storageRef);
                setBgImageUrl(url);
            } catch (error) {
                console.error("从Firebase获取图片出错:", error);
            }
        };

        fetchImage();
    }, []);

    return (
        <>
            {bgImageUrl && (
                <Image src={bgImageUrl} alt="Hero图片" fill={true} />
            )}
        </>
    );
};

export default Hero;

2. 修复Firebase初始化文件 #

检查firebase.js，确保初始化代码仅在客户端执行，避免服务器端访问window：

// firebase.js
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

let storage;

if (typeof window !== 'undefined') {
  const firebaseConfig = {
    // 你的Firebase配置信息
  };

  const app = initializeApp(firebaseConfig);
  storage = getStorage(app);
}

export { storage };

3. 强制组件客户端渲染 #

使用Next.js的dynamic函数导入Hero组件，关闭SSR确保组件完全在客户端运行：

// app/page.js
import dynamic from 'next/dynamic';

// 禁用SSR，强制客户端渲染
const Hero = dynamic(() => import('./Hero'), { ssr: false });

export default function Home() {
  return (
    <Hero />
  );
}

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