我在NextJS项目中尝试Map数组时遇到了一个问题。我遇到的错误是：

⨯ src\app\delivery\cart\page.tsx (30:9) @ map
 ⨯ TypeError: Cannot read properties of null (reading 'map')
    at Cart (./src/app/delivery/cart/page.tsx:36:18)
  28 |                  <Navbar />
  29 |                  <p className="text-4xl p-4">Cart</p>
> 30 |                  {cart.map((item) => (
     |                       ^
  31 |                          <div key={crypto.randomUUID()}>
  32 |                                  <p>{item.name}</p>
  33 |                                  <p>{item.price}</p>

字符串
我感到困惑的原因是因为一切都被正确渲染了。我最好的猜测是有一瞬间我的cart useState变量为null，因此弹出了这个错误。下面是cart/page.tsx的代码：

"use client";

import Navbar from "@/components/delivery/navbar";
import { useEffect, useState } from "react";

export default function Cart() {
    const cartFromLocalStorage =
        typeof window !== "undefined"
            ? JSON.parse(localStorage.getItem("cart") || "[]")
            : null;

    const [cart, setCart] = useState<
        {
            name: string;
            imgSrc: string;
            price: number;
            id: number;
            amount: number;
        }[]
    >(cartFromLocalStorage);

    useEffect(() => {
        localStorage.setItem("cart", JSON.stringify(cart));
    }, [cart]);

    return (
        <>
            <Navbar />
            <p className="text-4xl p-4">Cart</p>
            {cart.map((item) => (
                <div key={crypto.randomUUID()}>
                    <p>{item.name}</p>
                    <p>{item.price}</p>
                    <p>{item.id}</p>
                    <p>{item.amount}</p>
                </div>
            ))}
        </>
    );
}

型
我尝试通过以下代码检查cart是否存在来修复此问题。

{cart ? cart.map((item)=> (...)) : "<p> No Items in Cart </p>"}

型
我也改变了

const cartFromLocalStorage =
        typeof window !== "undefined"
            ? JSON.parse(localStorage.getItem("cart") || "[]")
            : null;

型
到

const cartFromLocalStorage =
        typeof window !== "undefined"
            ? JSON.parse(localStorage.getItem("cart") || "[]")
            : [];

型
但这两次尝试都导致了NextJS的水合错误。这让我抓狂，我还没能找到一个可靠的修复方法。任何帮助都非常感谢。