React提前渲染导致params.id未获取仅执行if分支的问题求解

核心原因 #

绝大多数情况并非「参数未完成取值就渲染」，而是路由参数的类型与本地data中id的类型不匹配：

• 路由参数props.match.params.id或useParams()返回的id固定为字符串类型
• 若本地data的products项id为数字类型，使用===严格相等判断时，类型不一致会直接返回false，导致永远匹配不到对应项，触发兜底渲染逻辑。

通用修复方案：修正类型匹配逻辑 #

将匹配两端的id统一为相同类型后再判断，修改find匹配逻辑即可：

// 适配data中id为数字的场景：两端统一转数字
const product = data.products.find((x) => Number(x.id) === Number(y));

// 适配data中id为字符串/混合类型的场景：两端统一转字符串
const product = data.products.find((x) => String(x.id) === String(y));

React Router v6 版本适配方案 #

若使用React Router v6，props.match已被废弃，函数组件需使用useParams获取路由参数，完整修正代码如下：

import data from'./data'
import React  from 'react'
import { useParams } from 'react-router-dom'

export default function Productdisplay() {
  const { id } = useParams()
  // 统一类型后匹配
  const product = data.products.find((x) => Number(x.id) === Number(id));

  if(!product){
    return <div>No product to display</div>
  }
  return(
    <>
      {/* 匹配成功后要渲染的业务代码 */}
    </>
  )
}

极端场景兼容（参数确实异步获取） #

如果存在路由嵌套、懒加载等特殊场景，确实会出现参数延迟获取的情况，可以加一层加载状态判断：

const { id } = useParams()
// 参数未获取完成时返回加载态
if (!id) return <div>加载中...</div>

const product = data.products.find((x) => Number(x.id) === Number(id));
// 后续匹配、渲染逻辑不变

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