Vercel部署后hidden输入值未识别，报uuid格式错误

问题现象 #

• 本地开发环境中数据更新功能正常，部署到Vercel后提交表单时出现错误：

  invalid input syntax for type uuid: "undefined" - unable to save
  

• 当前模块的隐藏输入框<input type="hidden">在Vercel上无法被正确识别，但另一模块使用相同写法可正常工作

关键代码片段 #

表单部分 #

<form onSubmit={onSubmit} className="p-8 text-gray-600 w-full bg-white rounded-lg shadow-md">
  <input type="hidden" value={water_types.id} name="id"/>
  <!-- 其他输入框和按钮 -->
</form>

提交函数 #

async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  try { 
    const formData = new FormData(event.currentTarget);
    const res = await editFunction(formData);
  } catch (err) {
    console.error(err, "error");
    if (err instanceof Error) {
      setMessage(err.message);
    } else {
      setMessage("An error occurred");
    }
  }
}

服务器动作 #

export async function editFunction(formData: FormData): Promise<{ message: string }> {    
  const cookieStore = cookies()
  const supabase = createServerActionClient({ cookies: () => cookieStore })
  const {data: {user}} = await supabase.auth.getUser();

  try{    
    const name = formData.get('name')
    const price = formData.get('price')
    const idValue = formData.get('id');

    console.log(formData, "formData") // 本地控制台数据显示正常
  
    const {data, error} = await supabase.from('db')
      .update({ name, price })
      .eq('id', idValue)

    console.log(data, "data")
    console.log(error, "error")
  
    if(error){
      return {message: `${error.message}  - unable to save`}
    } 
    return { message: `Succesfully added the data` }
  }catch(e){
    return {message: "Failed to submit the form."}
  }
}

数据库表结构 #

create table
  public.db (
    id uuid not null default uuid_generate_v4 (),
    name text not null,
    price numeric(10, 2) not null,
    user_id uuid not null,
    constraint db_pkey primary key (id),
    constraint db_user_id_fkey foreign key (user_id) references profiles (id)
  ) tablespace pg_default;

排查与解决步骤 #

1. 验证数据加载时机 #

本地环境数据可能预加载完成，但Vercel生产环境存在 hydration 不匹配的可能，导致渲染表单时water_types.id尚未加载，隐藏输入框值为undefined。

• 解决：在渲染表单前先判断water_types.id是否存在，添加条件渲染：

  {water_types.id && (
    <input type="hidden" value={water_types.id} name="id"/>
  )}
  

• 或者在组件层面添加加载状态，确保数据就绪后再渲染表单。

2. 服务器端强制校验ID参数 #

在服务器动作中先校验idValue的有效性，避免向数据库传入无效值：

const idValue = formData.get('id');
// 校验ID是否存在且为字符串类型
if (!idValue || typeof idValue !== 'string') {
  return { message: '无效的ID参数 - 无法保存' };
}
// 再执行Supabase更新操作

3. 手动构造FormData避免序列化问题 #

尝试绕过表单自动序列化，手动构造FormData确保ID值正确传入：

async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
  try { 
    const formData = new FormData();
    // 手动添加字段
    formData.append('id', water_types.id);
    formData.append('name', event.currentTarget.name.value);
    formData.append('price', event.currentTarget.price.value);
    const res = await editFunction(formData);
  } catch (err) {
    // 错误处理逻辑
  }
}

4. 查看Vercel日志定位问题 #

在服务器动作中添加更详细的日志，然后去Vercel控制台查看生产环境的实际数据：

console.log('当前用户:', user);
console.log('提交的ID值:', idValue);

通过日志确认idValue是否真的为undefined，以及用户认证状态是否正常。

5. 对比正常模块的差异 #

既然另一模块相同写法正常，对比两个模块的以下差异：

• 数据加载逻辑（SSR/CSR的使用差异）
• 表单的条件渲染规则
• 服务器动作中的用户认证与权限校验逻辑

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