React NextJS中JSON数据解析为指定类型数组报错求助

问题根源 #

• fetchData函数中调用的response.json()已经完成了JSON字符串到JavaScript对象数组的转换，返回的是现成的JS对象，而非原始JSON字符串。
• parseData函数要求传入JSON字符串并执行JSON.parse()，但实际收到的是JS对象，JS对象会被隐式转为字符串"[object Object]"，这显然不是合法JSON，因此抛出语法错误。

解决方案 #

方案1：移除多余的解析步骤（推荐） #

既然response.json()已经直接返回了符合结构的对象数组，无需再手动解析，直接通过类型断言指定类型即可：

修改page.tsx中的useEffect逻辑：

"use client";
import CollapsingTable from "@/components/admin-dashboard/CollapsingTable";
import PageHeading from "@/components/admin-dashboard/PageHeading";
import fetchData from "@/lib/services/fetchData";
import { useEffect, useState } from "react";
// 记得导入User类型（需先给User添加export）
import type { User } from "@/path-to-your-user-type-file";

export default function ProductPage() {
  const dataUrl = "https://jsonplaceholder.typicode.com/users";
  const [userList, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const userData = await fetchData(dataUrl);
        // 直接对已解析的对象做类型断言
        const users = userData as User[];
        setUsers(users);
      } catch (error) {
        console.error("获取用户数据失败:", error);
      }
    };

    fetchUsers();
  }, []);

  return (
    <>
      <PageHeading
        title="Product Management"
        href="products"
        children={undefined}
      ></PageHeading>
      {/* <CollapsingTable data={userList} /> */}
    </>
  );
}

同时可以删除parseData相关的导入和函数，因为已经不再需要。

方案2：修改fetchData返回原始JSON字符串（保留parseData逻辑时用） #

如果确实需要保留parseData的解析逻辑，让fetchData返回原始的JSON文本字符串：

修改fetchData.ts：

export default async function getAllObjects(url: string) {
  const response = await fetch(url);

  if (!response.ok) throw new Error("Fetching objects failed");
  return response.text(); // 返回原始文本字符串，而非解析后的对象
}

此时page.tsx中的原有代码可以正常运行，parseData能正确接收JSON字符串并解析。

额外优化点 #

• 给User类型添加export，确保在其他文件中能正确引用：

export type User = {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    };
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

• 用async/await替代.then()写法，让异步逻辑更易读。

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