Next.js开发电影克隆应用 报无法读取undefined的length属性错误

开发电影应用克隆项目时，运行过程中抛出未捕获的运行时错误：

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

关联的Banner组件原始代码如下：

import Image from 'next/image'
import { useEffect, useState } from 'react'
import { baseUrl } from '../constants/movie'
import { Movie } from '../typing'

interface Props {
  netflixOriginals: Movie[]
}

function Banner({ netflixOriginals }: Props) {
  const [movie, setMovie] = useState<Movie | null>(null)
 
  useEffect(() => {
    setMovie(
      netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
    )
  }, [netflixOriginals])

  console.log(movie)
  
  return (
    <div>
      <div className='absolute top-0 left-0 h-[95vh] w-screen'>
      <Image
          src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`}
          layout="fill"
        />
      </div>
    </div>
    )
}

export default Banner

报错触发点在useEffect内读取netflixOriginals.length的逻辑：组件首次渲染时，父组件传递的netflixOriginals还未完成数据请求、值为undefined，此时直接读取undefined的length属性就会触发该类型错误。
除此之外，初始状态下movie值为null，Image组件会拼接出无效的资源地址，也会触发后续渲染警告。

• 给组件props设置默认空数组兜底，避免未传参/数据未返回时取值报错
• 在选片逻辑前增加数组有效性判断，仅当数组存在且有内容时才执行随机选片
• 增加movie空状态判断，避免Image组件加载无效资源

修复后的完整代码：

import Image from 'next/image'
import { useEffect, useState } from 'react'
import { baseUrl } from '../constants/movie'
import { Movie } from '../typing'

interface Props {
  netflixOriginals: Movie[]
}

// 给netflixOriginals设置默认空数组兜底
function Banner({ netflixOriginals = [] }: Props) {
  const [movie, setMovie] = useState<Movie | null>(null)
 
  useEffect(() => {
    // 仅当数组非空时执行随机选片逻辑
    if (netflixOriginals.length > 0) {
      setMovie(
        netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)]
      )
    }
  }, [netflixOriginals])
  
  return (
    <div>
      <div className='absolute top-0 left-0 h-[95vh] w-screen'>
        {/* 仅当movie存在时才渲染图片组件，避免无效src */}
        {movie && (
          <Image
            src={`${baseUrl}${movie.backdrop_path || movie.poster_path}`}
            layout="fill"
            alt="Banner cover"
          />
        )}
      </div>
    </div>
  )
}

export default Banner

内容的提问来源于stack exchange，提问作者Halil İbrahim