「暂无数据」掩盖了三种截然不同的故障，用自诊断空态拆开它

某次改版后，后台管理系统的一个级联下拉突然收到大量工单：「这个下拉是坏的，什么都选不了」。我去查数据库，字典表里记录好好的，接口也正常返回——只是某个业务分类树只录入了 12%，大量父节点没有子节点。用户选完第一级，第二级一片空白，看起来就像 bug。

问题根源不在代码，在于「暂无数据」四个字把三种完全不同的状态糊在了一起。

现象

打开一个依赖后台配置的级联选择器：

┌──────────────────────┐
│ 分类：▼              │
│                      │
│   暂无数据           │
│                      │
└──────────────────────┘

用户看到这里，第一反应几乎都是「系统出问题了」——因为他们上周还能选，或者同事那边能选。支持工单开始堆积。

根因

「暂无数据」背后其实藏着三种完全正交的失败模式：

真空态：新租户 / 新环境，数据本来就还没有，是合理的业务初始状态。
过滤导致空：父级选中后，子集为空——数据存在，但当前筛选路径下没有命中。
元数据缺口：管理员忘记在配置页里录入字典 / 分类 / 标签，数据在表里本应存在却是 0 条。

三种情况只有第三种是用户（或管理员）可以立刻行动修复的，但 UI 给不出任何信号。而且管理员和普通用户的处理方式还不一样——管理员可以直接跳到配置页补录，普通用户只能联系管理员。

坑：一个「暂无数据」掩盖了三种错误

当空态的语义被压缩成同一个字符串，第三种情况（管理员忘配置）和第一种（合理的真空）在用户看来没有任何区别。用户无法判断「我能做什么」，于是默认选择报 bug。结果是：支持工单里有大量根本不需要开发介入、只需管理员补录几条数据的噪音。

正解

引入一个语义化的 <EmptyDataHint> 组件，接受一个 reason 字段，在 metadata-gap 情况下按权限分叉渲染：

// src/components/EmptyDataHint.tsx
import Link from 'next/link'
import { useMenuAccess } from '@/hooks/useMenuAccess'
 
interface Props {
  reason: 'no-data' | 'filter' | 'metadata-gap'
  mgmtPath: string    // 配置页路由，如 '/admin/categories'
  mgmtLabel: string   // 如「分类配置」
  dataLabel: string   // 如「可选分类」
}
 
export function EmptyDataHint({ reason, mgmtPath, mgmtLabel, dataLabel }: Props) {
  const canManage = useMenuAccess(mgmtPath)
 
  if (reason === 'filter') {
    return <span className="text-muted-foreground">当前筛选下无可选项</span>
  }
 
  if (reason === 'metadata-gap') {
    return canManage ? (
      <span className="text-muted-foreground">
        {dataLabel}为空，<Link href={mgmtPath} className="text-primary underline">
          去补充 {mgmtLabel}
        </Link>
      </span>
    ) : (
      <span className="text-muted-foreground">
        {dataLabel}为空，请联系管理员补充 {mgmtLabel}
      </span>
    )
  }
 
  return <span className="text-muted-foreground">暂无{dataLabel}</span>
}

用一个小工具函数自动判断 reason，不用每个调用点手写条件：

export function detectReason(
  filtered: unknown[],
  all: unknown[],
  parent?: unknown
) {
  if (all.length === 0) return 'metadata-gap'
  if (parent && filtered.length === 0) return 'filter'
  return 'no-data'
}

使用时挂到选择器的空态插槽：

<Select options={options}>
  {options.length === 0 && (
    <EmptyDataHint
      reason={detectReason(options, allOptions, parentValue)}
      mgmtPath="/admin/categories"
      mgmtLabel="分类配置"
      dataLabel="可选分类"
    />
  )}
</Select>

正解：让空态自己说明原因，并给出权限感知的修复路径

管理员看到的是「可选分类为空，去补充分类配置」（可点击直达配置页）；普通用户看到的是「可选分类为空，请联系管理员补充分类配置」。两类用户都知道下一步该做什么，支持工单噪音消失。

什么时候不要用这个模式

空态是合理的业务状态（今天没有订单、收件箱为空）——不要诱导用户去「配置」本不需要配置的东西。
没有对应的管理页面——给出一个死链比不给更糟。
元数据来自外部系统同步，管理员无法手动补录——别承诺一个做不到的修复路径。
空态的真正原因是数据建模缺陷（如外键丢失）——修 schema，不要用空态 UI 掩盖结构问题。

一句话外卖

空态不是终点，而是诊断入口——UI 应该告诉用户「为什么空」以及「谁能修、怎么修」，而不是把三种不同的故障塞进同一句「暂无数据」。