Next.js组件传值报错求助：仅支持纯对象和部分内置类型

问题根源 #

你碰到的这个序列化错误，核心有两个问题：

1. 错误处理逻辑错误：你在fetchMaterial的catch块里抛出了next/error组件（这是个React组件，不是Error实例），React Query尝试序列化这个组件时触发了Next.js的序列化限制。
2. Axios返回数据可能带非纯对象结构：Axios的响应数据有时候会自带一些原型属性，导致Next.js无法正确序列化。

修复方案 #

1. 修正错误处理逻辑 #

把fetchMaterial里抛出的next/error换成标准的Error实例，别再抛组件了：

import axios, { AxiosResponse } from "axios";
import { Material } from "../model/Material";
import { toast } from "sonner";
import { QueryData } from "@/app/model/QueryData";

const fetchMaterial = () => {
  return axios
    .get<Material[]>("http://127.0.0.1:8000/show-data/")
    .catch((e) => {
      console.error(e);
      toast.error("Error getting material");
      // 抛出标准Error实例，而非next/error组件
      throw new Error("Failed to fetch materials");
    });
};

export const getMaterial = (): QueryData<Material[]> => ({
  queryKey: ["material"],
  queryFn: async () => {
    const response = await fetchMaterial();
    return response.data;
  },
});

2. 确保返回纯对象数据 #

如果改完错误处理还不行，就把Axios返回的数据转成纯JSON对象，去掉多余的原型属性：

export const getMaterial = (): QueryData<Material[]> => ({
  queryKey: ["material"],
  queryFn: async () => {
    const response = await fetchMaterial();
    // 转换为纯对象，消除原型属性影响
    return JSON.parse(JSON.stringify(response.data)) as Material[];
  },
});

3. 额外检查项 #

• 确认MaterialList组件顶部确实添加了"use client"指令，是客户端组件；
• 检查Material接口是纯对象结构，没有包含类、函数这类不可序列化的内容：

  // 正确的Material接口示例
  export interface Material {
    id: number;
    name: string;
    // 其他属性均为基础类型
  }
  

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