React TS动态侧边栏渲染：map遍历route未定义及TS类型报错问题

问题根因 #

你遇到的两类报错均由类型定义不匹配、状态初始化逻辑错误导致：

• 初始写const [routes, setRouting] = useState([])时未指定状态类型，TS会将空数组推导为never[]类型，因此访问元素的href属性时触发Property 'href' does not exist on type 'never'.ts(2339)报错。
• 自定义的SidebarProps接口类型定义错误：接口中links被定义为单个路由对象，但实际导航数据源是路由对象组成的数组；且useState初始化时写useState([links])相当于将传入的links对象额外包裹一层数组，和后续setRouting传入的数组结构不匹配，导致遍历阶段出现元素未定义的异常。
• 首次渲染时useEffect内的赋值逻辑还未执行，routes为初始化的错误结构，无有效兜底时会直接触发渲染报错。

修复步骤 #

1. 抽离统一的路由类型，修正类型定义

// 定义单个导航路由项的结构
type NavItem = {
  name: string
  href: string
}

// 组件入参类型
interface SidebarProps {
  links?: NavItem
}

2. 给useState显式声明泛型类型，修正初始化值

// 显式指定routes为NavItem类型的数组，初始值设为空数组即可
const [routes, setRouting] = useState<NavItem[]>([])

3. 保留原有路由赋值逻辑即可，列表遍历时增加安全兜底，同时补充React列表渲染要求的key属性

<div className="flex-1 mt-12 w-full px-2 space-y-1">
  {routes?.map((route) => (
    <Link key={route.href} href={route.href}>
      <a
        title={route.name}
        className='text-white hover:bg-gray-800 hover:text-gray-300 group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium'
      >
        <span className="mt-2">{route.name}</span>
      </a>
    </Link>
  ))}
</div>

注意：map遍历渲染列表时必须给列表根节点设置唯一的key属性，否则React会抛出渲染警告，此处使用每个路由唯一的href作为key值即可。

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