路由处理器仅接收POST请求，物料增删改仅新增可用问题求助

核心问题分析 #

1. DELETE请求返回HTML（解析JSON报错），说明请求未匹配到API路由，而是返回了页面（如404页面）
2. 路由处理器中的console.log未触发，确认路由未被调用
3. 路由中错误地使用await params获取参数，导致逻辑异常

修复步骤 #

1. 修正路由文件结构 #

当前路由文件app/[locale]/(protected)/admin/materials/api/route.jsx仅能匹配/api根路径请求，而带ID的/api/12请求需要单独的动态路由文件：

• 创建新路径：app/[locale]/(protected)/admin/materials/api/[id]/route.jsx
• 将原DELETE逻辑迁移到这个新文件中

2. 修正路由中参数获取方式 #

移除params前的await，因为params是直接可用的对象：

// 错误写法
const { id } = await params;

// 正确写法
const { id } = params;

修正后的完整路由代码：

export async function DELETE(request, { params }) {
  const t = await getTranslations("HomePage");
  const { id } = params;
  console.log(id);

  if (!id) {
    return Response.json(
      { message: "Material ID is required" },
      { status: 400 }
    );
  }

  try {
    await db("DELETE FROM materials WHERE id = ?", [id]);
    console.log("well done");
    return Response.json(
      { message: "Material deleted successfully" },
      { status: 200 }
    );
  } catch (error) {
    console.log(error);
    return Response.json({ message: t("somethingWrong") }, { status: 500 });
  }
}

3. 优化前端删除逻辑 #

调整状态更新时机（确保请求成功后再更新），并增强错误处理：

const handleDelete = async (id) => {
  try {
    const response = await fetch(
      `http://localhost:3000/${locale}/admin/materials/api/${id}`,
      {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

    if (!response.ok) {
      const errorInfo = await response.json().catch(() => ({ message: "请求失败" }));
      console.error("删除物料失败:", errorInfo.message);
      return;
    }

    const data = await response.json();
    console.log(data);
    // 请求成功后再更新本地状态
    setMaterials(materials.filter((material) => material.id !== id));
  } catch (error) {
    console.error("删除物料出错:", error);
  }
};

关键说明 #

• Next.js App Router中，动态路由参数（如[id]）需要通过创建对应名称的文件夹来捕获，否则请求会被路由到页面而非API
• 路由处理器的params参数无需await，直接解构即可获取动态参数

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