如何避免数据获取前出现undefined？Mongo数据查询报错修复指南

我从Mongo获取数据，成功获取前，和useState([])相关的变量出现undefined。当尝试访问teamX[0].name时触发如下错误：

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'name')

我的代码实现如下：

const router = useRouter()
const {id} = router.query
console.log(id)               // first undefined then team

const [teams, setTeams] = useState([])

const teamX = []

if(id === 'team') {
  const x = teams.find(item => item._id === '64501115948ae9070cdd5ba5') 
  teamX.push(x)
}

console.log(teamX)         // first [] then [{...}]
 
const fetchData = async () => {
  try {
    const { data } = await axios('/api/getTeam/data')
    console.log(data)        // (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    setTeams(data)
  } catch (error) {
    console.log(error)
  }
}
 
useEffect(() => {
  fetchData()
}, [])

控制台输出如下：

undefined   // console.log(id)
[]          // console.log(teamX)
team        // console.log(id)
[undefined] // console.log(teamX)
(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
team        // console.log(id)
[{…}]       // console.log(teamX)

问题核心是组件初始化阶段，id未就绪、teams为空数组，导致teamX存入undefined，后续访问teamX[0].name时触发报错。可以通过以下步骤解决：

1. 给teamX的生成逻辑加空值校验 #

确保只有在id有效且teams有数据时，才执行查找操作，避免存入undefined：

const teamX = []
if(id === 'team' && teams.length > 0) {
  const x = teams.find(item => item._id === '64501115948ae9070cdd5ba5') 
  if(x) { // 找到匹配数据再push
    teamX.push(x)
  }
}

2. 访问teamX[0].name前做兜底处理 #

在需要使用该值的地方，通过以下方式避免报错：

• 可选链+默认值：

{teamX[0]?.name || '加载中...'}

• 条件渲染：

{teamX.length > 0 ? teamX[0].name : '加载中...'}

3. 优化数据加载时机（可选） #

把id加入useEffect的依赖数组，确保id存在后再发起请求，减少无效渲染：

useEffect(() => {
  if(id) {
    fetchData()
  }
}, [id])

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