NextJS根据搜索参数展示数据异常：控制台输出undefined求助

AI 小北

2026-8-1

问题排查与解决方案

核心原因分析

控制台输出results为undefined，主要是以下几个环节出了问题：

1. 错误处理顺序错误

你原代码中先解析了响应体，再判断请求是否成功。如果请求失败（比如API密钥无效、参数非法），响应体可能没有results字段，导致data.results为undefined，且错误抛出不及时，最终将undefined传递给了组件。

2. 未处理搜索参数为空/不存在的场景

当URL中没有search查询参数时，context.query.search是undefined，直接拼入请求URL后，TMDB API返回的响应可能没有results字段，导致返回的props中results为undefined。

3. 未给`results`设置兜底值

无论请求结果如何，都没有给results设置默认空数组，导致组件接收的props可能是undefined。

修正后的代码

调整getServerSideProps逻辑

import Results from "components/Results";
import React from "react";

export async function getServerSideProps(context) {
  // 给搜索参数兜底空字符串，避免undefined
  const keyword = context.query.search || "";
  console.log("keyword " + keyword);

  const res = await fetch(
    `https://api.themoviedb.org/3/search/movie?api_key=${process.env.API_KEY}&query=${keyword}&language=en-US&include_adult=false`
  );

  // 先判断请求是否成功，再解析响应
  if (!res.ok) {
    throw new Error("oops movie not found");
  }

  const data = await res.json();
  // 给results兜底空数组，确保不会返回undefined
  const results = data.results || [];

  return {
    props: { results },
  };
}

优化组件逻辑

export default function searchTerm({ results = [] }) {
  console.log(results);

  return (
    <div>
      {results.length === 0 && (
        <h1 className="text-red-700 text-center">No movie found</h1>
      )}
      <Results results={results} />
    </div>
  );
}