Vercel数据库删除按钮报整数类型无效输入错误求助

错误原因 #

• 组件参数接收错误：你的RemoveBtn组件直接把id作为参数，但React函数组件的第一个参数是props对象，不是单独的属性值。当父组件传<RemoveBtn id={1} />时，你拿到的id实际是{ id: 1 }这个对象，插入SQL时会被序列化为字符串"{"id":1}"，而数据库的post_id是整数类型，因此触发类型不匹配错误。
• 逻辑执行时机错误：当前代码在组件渲染阶段就执行DELETE语句，导致组件一加载就删除数据，完全不符合「点击按钮才删除」的预期。

修复方案 #

步骤1：正确接收组件props #

先修正参数接收方式，确保拿到正确的id数值：

export default function RemoveBtn({ id }) { // 解构props获取id
  // ...后续逻辑
}

步骤2：将删除逻辑改为Server Action（Next.js 13+推荐） #

直接在组件渲染时执行数据库操作是错误的，需要把删除逻辑放到Server Action中，通过按钮点击触发：

首先创建Server Action文件（比如actions.js）：

"use server"; // 必须添加，标记为服务端执行的动作
import { revalidatePath } from "next/cache";
import { sql } from "@vercel/postgres";

export async function deletePost(id) {
  await sql`DELETE FROM posts01 WHERE post_id = ${id}`;
  revalidatePath("/allPosts");
}

然后修改RemoveBtn为客户端组件，绑定点击事件触发删除：

"use client"; // 标记为客户端组件
import { HiOutlineTrash } from "react-icons/hi";
import { deletePost } from "./actions"; // 导入Server Action

export default function RemoveBtn({ id }) {
  const handleDelete = async () => {
    await deletePost(id);
  };

  return (
    <button 
      className="text-red-400"
      onClick={handleDelete}
    >
      <HiOutlineTrash size={24} />
    </button>
  );
}

验证要点 #

• 确认传递给RemoveBtn的id是整数类型，而非字符串或其他类型。
• Server Action文件顶部必须加"use server"指令，保证数据库操作在服务端执行。
• 点击按钮后，/allPosts路径会被重新验证，页面数据会自动更新。

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