Next.js中localStorage相关ReferenceError及变量未定义问题求助

安全阿岳

2026-8-19

解决Next.js中localStorage读取导致的ReferenceError问题

问题原因分析

第一个代码的核心问题是变量作用域：selectedCategoryName在if (typeof window !== 'undefined')块内用let声明，块外无法访问，所以return里的{selectedCategoryName}会报错。另外，Next.js服务端渲染时，return部分的代码仍会执行，即使判断了window，未初始化的变量依然会引发错误。
第二个代码的问题：
- localStorage的方法写错了，应该是localStorage.getItem()而非localStorage.get()
- 未提前声明myState状态变量，setMyState无法调用
- 服务端渲染时初始状态未设置，页面首次渲染会出现undefined

正确实现方案

使用useState初始化状态，配合useEffect在浏览器端读取localStorage，既能避免服务端渲染报错，又能正确获取存储的值：

import React, { useState, useEffect } from 'react';

const Sets = () => {
    // 初始化状态，服务端渲染时用默认值''
    const [selectedCategoryName, setSelectedCategoryName] = useState('');

    useEffect(() => {
        // useEffect仅在浏览器端执行，可安全访问localStorage
        const storedCategory = localStorage.getItem('selectedCategoryName');
        if (storedCategory) {
            // 若存储的是字符串直接赋值，是JSON对象则用JSON.parse(storedCategory)
            setSelectedCategoryName(storedCategory);
        }
    }, []);

    return (
        <div className="title">
            <h2>{selectedCategoryName}</h2>
        </div>
    )
}

export default Sets;