React项目中使用use client仍遇sessionStorage未定义错误求助

错误原因 #

即便添加了"use client"指令，组件的顶层代码仍会在服务端渲染阶段执行。sessionStorage是浏览器专属API，服务端环境中不存在该对象，因此直接在组件函数顶层调用sessionStorage.getItem()会触发ReferenceError。

修复方案 #

将sessionStorage的读写操作转移到useEffect中执行——useEffect的回调函数仅会在客户端组件挂载后运行，此时浏览器环境已就绪，可安全访问sessionStorage。同时用useState管理hideFooter状态，避免服务端初始化时依赖浏览器API。

修改后的代码 #

"use client";

import { useEffect, useState } from "react";
import { ProgressBar } from "staysure-component-library";
import Footer from "../components/organisms/footer/Footer";
import HomePage from "../components/pages/Home/HomePage";
import Styles from "./homePage.module.css";

function Page() {
  const [test, setTest] = useState(false);
  const [hideFooter, setHideFooter] = useState(false);

  useEffect(() => {
    // 仅在客户端读取sessionStorage
    const storedFooterStatus = sessionStorage.getItem("footer") === "true";
    setHideFooter(storedFooterStatus);

    // 若未存储过状态，写入sessionStorage
    if (!storedFooterStatus) {
      sessionStorage.setItem("footer", "true");
    }
  }, []);

  return (
    <div className="bg-surface-neutral-option-2">
      <header>
        <ProgressBar value={10} />
      </header>
      <div>
        <HomePage />
        {hideFooter ? null : (
          <footer>
            <Footer />
          </footer>
        )}
      </div>
    </div>
  );
}

export default Page;

关键改动说明 #

1. 用useState初始化hideFooter状态，避免服务端执行时直接访问sessionStorage
2. 将sessionStorage的读写逻辑全部放入useEffect回调，确保仅在客户端执行
3. 读取存储值后更新状态，保证渲染逻辑基于最新的客户端存储数据

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