React映射数组时出现Property 'map' does not exist on type 'never'错误

问题背景 #

从TMDB API获取电影数组并存入movie状态，尝试映射数组时出现错误提示：Property 'map' does not exist on type 'never'，以下是相关代码及控制台数据：

初始代码 #

import { useEffect, useState } from "react";
import MoviePoster from "../../Components/MoviePoster";

function Home() {
  const [movie, setMovie] = useState();
  const API_Url = `https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_TMBD_KEY}`;

  useEffect(() => {
    getMovies();
  }, []);

  async function getMovies() {
    const api = await fetch(API_Url);
    const result = await api.json();
    setMovie(result.results);
    console.log(result.results);
  }

  return (
    <div>
      {movie?.map((data:any) => {
        <MoviePoster key={data} {...data} />;
      })}
    </div>
  );
}

export default Home;

修改后的代码 #

import { useEffect, useState } from "react";
import MoviePoster from "../../Components/MoviePoster";

interface MovieList {
  title: string,
  id: string
}

function Home() {
  const [movie, setMovie] = useState<MovieList[]>([]);
  

  return (
    <div>
      {movie?.map((data:any) => {
        <MoviePoster key={data.id} {...data.title} />;
      })}
    </div>
  );
}

export default Home;

控制台返回的电影数据 #

错误原因分析 #

1. 初始代码问题：useState()未指定类型且无初始值，TypeScript会将movie的类型推断为never，导致调用map方法时触发类型错误；同时map回调中没有返回组件，最终不会渲染任何内容。
2. 修改后代码问题：删除了API请求的核心逻辑，导致movie始终是空数组；接口MovieList的id类型定义错误（实际数据中id是数字类型，不是字符串）；{...data.title}传递props的方式完全错误，会把字符串的每个字符拆解为props传递给组件。

完整修正方案 #

步骤1：补全并修正类型定义 #

根据控制台返回的数据，定义准确的电影项类型：

interface MovieItem {
  id: number;
  title: string;
  poster_path?: string;
  // 可根据MoviePoster组件的需求，补充如overview、release_date等字段
}

步骤2：正确初始化状态 #

明确指定状态类型并初始化为空数组：

const [movies, setMovies] = useState<MovieItem[]>([]);

步骤3：恢复并完善API请求逻辑 #

保留useEffect和getMovies函数，增加错误处理：

useEffect(() => {
  getMovies();
}, []);

async function getMovies() {
  try {
    const response = await fetch(API_Url);
    if (!response.ok) throw new Error('API请求失败');
    const result = await response.json();
    setMovies(result.results);
  } catch (error) {
    console.error('获取电影数据出错：', error);
  }
}

步骤4：修正组件映射逻辑 #

确保map回调返回组件，使用唯一的id作为key，正确传递props：

{movies.map((data) => (
  <MoviePoster key={data.id} {...data} />
))}

最终完整代码 #

import { useEffect, useState } from "react";
import MoviePoster from "../../Components/MoviePoster";

interface MovieItem {
  id: number;
  title: string;
  poster_path?: string;
  // 根据组件需求补充其他字段
}

function Home() {
  const [movies, setMovies] = useState<MovieItem[]>([]);
  const API_Url = `https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT_APP_TMBD_KEY}`;

  useEffect(() => {
    getMovies();
  }, []);

  async function getMovies() {
    try {
      const response = await fetch(API_Url);
      if (!response.ok) throw new Error('请求失败');
      const result = await response.json();
      setMovies(result.results);
    } catch (error) {
      console.error('获取电影数据出错：', error);
    }
  }

  return (
    <div>
      {movies.map((data) => (
        <MoviePoster key={data.id} {...data} />
      ))}
    </div>
  );
}

export default Home;

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