Next.js 14调用Vercel KV读取数据返回null及部署异常问题

DevOps 小满

2026-7-2

Next.js 14 + Vercel KV 读取数据异常问题

背景：数据已成功存入Vercel KV

我通过以下代码将数据存入Vercel KV（Redis）数据库：

import { kv } from "@vercel/kv";
...
await kv.set("cabins", data)

通过Vercel官网CLI执行get cabins命令，或本地脚本运行await kv.get("cabins")，均可确认数据已正确导入。

问题1：API路由读取KV数据返回null

我在Next.js 14应用的API路由src/app/api/getCabins/route.ts中尝试读取该数据：

// src/app/api/getCabins/route.ts

import { kv } from "@vercel/kv";

...

async function getCabinsFromKV(): Promise<CabinFromKV[]> {
  const cabins = await kv.get("cabins");
  console.log(cabins);
  console.log("PRINTING FROM GETCABINSFROMKV");
  return cabins
}

...

export async function GET() {
  try {
    const cabins = await getCabinsFromKV();
    ...
  } catch {...}

但上述代码中的console.log(cabins)始终输出null，无论是本地运行项目还是执行npm run build时均是如此。

问题2：客户端组件调用API导致页面报错

我在客户端组件中通过useEffect调用该API：

// src/components/heatmap/Heatmap.tsx
"use client"

const Heatmap: React.FC = () => {
  const [cabins, setCabins] = useState<CabinDetails[]>([]);

  ...

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("/api/getCabins", {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      });
      const { cabins } = await response.json();
      setCabins(cabins);
    };
    fetchData();
  }, []);
...
}

对应的页面代码：

// src/app/heatmap/page.tsx    

import Heatmap from "@/components/heatmap/Heatmap";

const Page = async ({}) => {
  return (
    <div>
      <Heatmap />
    </div>
  );
};

export default Page;

Vercel部署后其他页面正常，但该页面出现错误：
Application error: a client-side exception has occurred (see the browser console for more information).