React useFormState无法设置null类型属性的TypeScript问题

问题出在TypeScript对initialState的自动类型推断上：

• 你直接声明const initialState = { message: null }时，TypeScript会将其推断为更窄的类型{ message: null }，而非你定义的State类型。
• useFormState会结合初始状态的类型和postFiles的返回值类型推导最终状态类型。由于postFiles返回的是{ message: string }，TypeScript会将最终状态类型合并为{ message: string }，这就导致后续无法将message设为null。

解决方法 #

1. 显式指定initialState的类型（推荐） #

直接给initialState标注你定义的State类型，强制TypeScript使用预期类型：

const initialState: State = { message: null };
const [state, dispatch] = useFormState(postFiles, initialState);

2. 使用类型断言 #

如果不想显式标注类型，也可以用as断言将初始状态指定为State类型：

const initialState = { message: null } as State;
const [state, dispatch] = useFormState(postFiles, initialState);

额外检查 #

确保postFiles的返回值始终符合State类型——如果后续有返回message: null的场景，要保证返回对象类型匹配，比如：

export async function postFiles(prevState: State, formData: FormData) {
  // 示例：上传失败时返回null
  if (/* 上传失败条件 */) {
    return { message: null };
  }
  return { message: "Uploaded" };
}

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