如何在PayloadCMS页面保存校验时显示自定义错误提示？

要让后台展示你的自定义错误提示，不能直接抛出普通Error，得改用Payload内置的ValidationError类型，这个类型的错误会被后台UI正确识别并显示具体内容。

修改后的钩子代码 #

export const revalidateDarkPage: CollectionBeforeChangeHook<Page> = async ({
  data,
  req: { locale, payload, query, routeParams },
}) => {
  const isAutosave = query?.autosave === 'true'

  if (isAutosave || data.darkPage !== true) return data

  // 检查是否已有其他页面启用了darkPage
  const existing = await payload.find({
    collection: 'pages',
    locale,
    where: {
      darkPage: {
        equals: true,
      },
    },
    limit: 1,
  })

  const alreadyExists = existing.docs[0]

  // 如果是更新当前页面则允许，否则抛出验证错误
  if (!!alreadyExists && alreadyExists.id !== routeParams?.id) {
    payload.logger.info(
      'Only one page can be set as Dark Page. Another page already has this enabled.',
    )
    // 改用Payload的ValidationError抛出错误，指定关联字段和提示内容
    throw new payload.errors.ValidationError(
      '只能有一个页面设置为深色主题页面，已有其他页面启用了该设置。',
      {
        fields: {
          darkPage: '只能有一个页面设置为深色主题页面，已有其他页面启用了该设置。',
        },
      },
    )
  }

  return data
}

关键改动说明 #

• 替换new Error()为new payload.errors.ValidationError()，这是Payload专门用于验证场景的错误类，能被后台UI正确解析
• 通过第二个参数的fields配置，把错误信息关联到darkPage字段，错误提示会直接显示在该字段下方，用户能快速定位问题
• 错误信息支持中文，后台会直接展示自定义内容

修改完成后，当用户尝试设置第二个深色主题页面时，后台就会显示你定义的错误文本，而非默认的“Something went wrong”。

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