Next.js 13调用/api/posts/[id]报TypeError的问题排查

核心原因 #

报错TypeError: Failed to parse URL from /posts/1说明你实际发起的请求路径是/posts/1，但你的API接口定义在/api/posts/[id]路径下，请求路径缺少了/api前缀；或者模板字符串拼接时出现语法错误，导致路径不符合API路由的实际地址。另外也可能是动态路由参数id的获取或拼接有误，比如未正确从params中读取id值，导致路径格式异常。

解决方法 #

1. 修正fetch请求路径
   确保fetch的路径包含/api前缀，并且正确拼接动态参数id。

   • 如果是Server Component，代码示例：

     // src/blog/[id]/page.js
     export default async function BlogPost({ params }) {
       const res = await fetch(`/api/posts/${params.id}`);
       if (!res.ok) {
         throw new Error('Failed to fetch post');
       }
       const post = await res.json();
       return <div>{post.title}</div>;
     }
     

   • 如果是Client Component，需用useParams获取动态参数：

     // src/blog/[id]/page.js
     'use client';
     import { useParams } from 'next/navigation';
     import { useEffect, useState } from 'react';
     
     export default function BlogPost() {
       const { id } = useParams();
       const [post, setPost] = useState(null);
     
       useEffect(() => {
         async function fetchPost() {
           const res = await fetch(`/api/posts/${id}`);
           const data = await res.json();
           setPost(data);
         }
         fetchPost();
       }, [id]);
     
       return post ? <div>{post.title}</div> : <div>Loading...</div>;
     }
     

2. 验证API路由路径与逻辑
   确认API路由文件路径为src/app/api/posts/[id]/route.js，且正确导出GET方法：

   // src/app/api/posts/[id]/route.js
   import { NextResponse } from 'next/server';
   // 替换为你的MySQL查询逻辑
   import db from '@/lib/db';
   
   export async function GET(request, { params }) {
     const { id } = params;
     const post = await db.query('SELECT * FROM posts WHERE id = ?', [id]);
     return NextResponse.json(post[0]);
   }
   

3. 检查模板字符串语法
   确保用反引号`包裹路径，变量id用${}正确插入，避免拼写错误（比如把${id}写成$id或遗漏符号）。

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