Next.js 13.4.16(App Router)运行时错误：无法读取undefined的status属性

问题场景 #

使用Next.js 13.4.16的App Router构建作品集网站时，触发未处理的运行时错误：Error: Cannot read properties of undefined (reading 'status')

相关代码 #

1. 错误的API路由文件（app/getExperience/page.ts） #

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})
}

2. 类型定义文件（typings.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[];
}

3. Sanity配置文件（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)

错误原因及解决方案 #

1. API路由不符合App Router规范 #

Next.js App Router对API路由有严格的位置和写法要求：

• 必须放在app/api/[路由名]/route.ts路径下，不能用普通的page.ts文件
• 不再使用NextApiRequest/NextApiResponse，需改用NextResponse

修正步骤：

• 创建app/api/experience/route.ts文件
• 替换为App Router兼容的API代码：

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

const query = groq`
*[_type == "experience"]{
  ...,
  technologies[]->
}`;

export async function GET() {
  const experiences: Experience[] = await sanityClient.fetch(query);
  return NextResponse.json({ experiences }, { status: 200 });
}

2. 类型定义错误 #

Experience接口中的dateStarted和dateEnded类型应为string（Sanity返回的是ISO日期字符串，而非原生Date对象），修正后：

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

3. 环境变量检查 #

确保.env文件中正确配置NEXT_PUBLIC_SANITY_PROJECT_ID等环境变量，变量名无拼写错误。

验证 #

修改完成后重启开发服务器，访问/api/experience应能正常返回Sanity中的经验数据，原错误即可解决。

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