Next.js 14客户端使用localStorage报错，加'use client'仍未解决

你的问题核心在于：即便添加了'use client'，组件顶层的localStorage.getItem('accessToken')在服务器端渲染（SSR）阶段依然会被执行——服务器环境不存在localStorage对象，因此直接触发错误。

以下是两种可行的修正方案：

方案一：在函数内部读取localStorage #

将token的读取逻辑移到GET函数内部，确保只有当函数在客户端执行时才访问localStorage：

'use client';
const baseURL = 'https://localhost:7264';

export async function GET(url, claim) {
    try {
        // 仅在函数调用时（客户端环境）读取localStorage
        const accessToken = localStorage.getItem('accessToken');
        const res = await fetch(`${baseURL + url}`, {
            method: 'GET',
            headers: {
                accessToken: accessToken,
                clientClaim: claim
            },
        });
        if (res.ok) {
            const data = await res.json(); // 原代码遗漏了await，需补充
            return data;
        }
        return null;
    } catch (error) {
        console.log(error);
        return null;
    }
}

方案二：用useState+useEffect在组件挂载后读取 #

如果需要在组件多个场景复用token，可以在组件层面通过状态管理，确保只在客户端挂载完成后读取localStorage：

'use client';
import { useState, useEffect } from 'react';
const baseURL = 'https://localhost:7264';

export default function YourComponent() {
    const [accessToken, setAccessToken] = useState(null);

    // 组件挂载后（仅客户端环境执行）读取localStorage
    useEffect(() => {
        const token = localStorage.getItem('accessToken');
        setAccessToken(token);
    }, []);

    async function GET(url, claim) {
        if (!accessToken) return null; // 确保token存在再发起请求
        try {
            const res = await fetch(`${baseURL + url}`, {
                method: 'GET',
                headers: {
                    accessToken: accessToken,
                    clientClaim: claim
                },
            });
            if (res.ok) {
                const data = await res.json();
                return data;
            }
            return null;
        } catch (error) {
            console.log(error);
            return null;
        }
    }

    // 组件其他业务逻辑...
    return <div>...</div>;
}

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