Next JS Unhandled Runtime Error 错误：无法读取未定义的属性（读取“状态”）

Question

在使用 Next.js 制作作品集网站时，这是我遇到的某种错误。

我正在使用最新版本的 Next.js，即 2016 年 4 月 13 日，我在我的项目中使用应用程序路由器。

此代码编写在 page.ts 内，该页面位于 app/getExperience 内

import type {NextApiRequest,NextApiResponse} from 'next';

import {groq} from "next-sanity";
import {sanityClient} from '../../sanity'
import {Experience} from "../../typings"

const query = groq
`*[_type == "experience"]{
  ...,
  technologies[]->
}`
type Data = {
  experiences: Experience[]
}

export default  async function handler(
  req:NextApiRequest,
  res:NextApiResponse<Data>
){
  const  experiences: Experience[] = await sanityClient.fetch(query)

  res.status(200).json({experiences})
}

这是根文件夹中的typing.d.ts文件

interface SanityBody {
    _createdAt: string;
    _id: string;
    _rev:string;
    _updatedAt:string;
}

export interface Social extends SanityBody {
    _type: "social";
    title:string;
    url:string;
}

interface Image {
    _type: 'image';
    asset:{
        _ref:string;
        _type:'reference';
    };
}

export interface PageInfo extends SanityBody{
    _type:'pageInfo';
    address: string;
    backgroundInformation: string;
    email:string;
    role:string;
    heroImage: Image;
    name: string;
    phoneNumber: string;
    profilePic: Image;
}

export interface Technology extends SanityBody{
    _type: "skill";
    image: Image;
    progress: number;
    title: string;
}

export interface Skill extends SanityBody{
    _type: "skill";
    image: Image;
    progress: number;
    title: string;
}

export interface Project extends SanityBody{
    _type: "project";
    title: string;
    image: Image;
    linkToBuild: string;
    summary: string;
    technologies: Technology[];
    
}

export interface Experience extends SanityBody{
    _type: "experience";
    company: string;
    companyImage: Image;
    dateStarted:date;
    dateEnded:date;
    isCurrentlyWorkingHere: boolean;
    jobTitle: string;
    points: string[];
    technologies: Technology[];
}

此代码写在 sanity.ts 文件内，该文件也在根文件夹下

import {createClient} from 'next-sanity'
import createImageUrlBuilder from '@sanity/image-url'

export const config = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET|| "production",
  apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15',
  useCdn: process.env.NODE_ENV === 'production',
  
};

//setup the client for fetching data in the getProps page functions
export const sanityClient = createClient(config);

export const urlFor = (source: any) => createImageUrlBuilder(config).image(source)

这是我遇到的错误

Answer 1

尝试从 NextApiResponse 中删除类型数据

Answer 2

将您的处理函数更新为：

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const experiences = await sanityClient.fetch(query)

  res.status(200).json({ experiences })
}

export default handler

基本上

res

的类型是

NextApiResponse

而不是

NextApiResponse<Data>

。