客户端组件调用Server Action报错：TypeError: Cannot read properties of undefined

你的代码里犯了一个典型的Server Actions使用错误：在form的action属性中直接执行了uploadFile(formData)，而不是传递函数引用。

问题根源 #

当组件渲染时，uploadFile(formData)会立即执行，但此时formData还未被创建（表单还没提交，Next.js还没收集到表单数据），导致函数内部调用formData.get('title')时触发Cannot read properties of undefined错误。而且Server Actions要求action接收的是函数本身，不是函数执行后的结果。

修正方案 #

直接把uploadFile函数传给action属性，不要调用它：

'use client';

import {uploadFile} from "@/app/lib/File/actions";

<form action={uploadFile}>
  <TextField label="Title" name="title" id="title" variant="outlined" fullWidth required />
  <Button type="submit">Submit</Button>
</form>

额外说明 #

如果需要给Server Action传递额外参数，可以用箭头函数包裹，但要确保参数能被Next.js序列化：

<form action={(formData) => uploadFile(formData, "额外参数")}>
  {/* 表单内容 */}
</form>

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