Next.js函数组件使用Hooks请求API报Trending未定义如何解决

报错TypeError: Trending is undefined来自几个容易忽略的开发问题：

• 组件名和接收的prop名完全重名，会引发作用域解析混淆，属于React/Next.js开发里的典型不规范写法
• 首次水合渲染阶段，getStaticProps的返回结果还没注入到组件props时，你直接访问Trending.title，此时Trending这个prop尚未赋值，值为undefined，读取属性会直接抛错
• 你写的router.isFallback判断只在配置了getStaticPaths的动态路由页面、且fallback设为true/'blocking'时才会触发，普通静态页里这个值恒为false，根本无法拦截空数据的渲染分支
• 大概率你请求的/blogs接口返回的是博客列表数组，不是单条博客对象，数组本身没有title属性，就算数据拿到了也会报属性不存在的错

1. 把接收的prop重命名为小写trending，和组件名做区分，同时给prop加默认值null做兜底
2. 渲染前增加空值判断，只要数据还没就绪就显示加载态，不要依赖isFallback做唯一的加载判断
3. 先确认接口返回结构，如果返回的是列表数组，要先取到你要渲染的单条数据再传入props
4. 给getStaticProps加错误捕获，避免接口请求失败导致整页构建报错

修正后的完整代码：

import Axios from "axios";
import { useRouter } from "next/router";
import Link from "next/link";
const Trending = ({ trending = null }) => {
  const router = useRouter();
  console.log('接口返回数据:', trending);
  // 双条件判断加载状态
  if (router.isFallback || !trending) {
    return <div>Loading...</div>;
  }
  return (
    <>
      <section>
        <div className="container Blog_page_sidebar">
          <div className="blog_details">
            <div className="blog_image">{trending.title}</div>
            <div className="blog_heading"></div>
            <div className="blog_detail"></div>
          </div>
        </div>
      </section>
    </>
  );
};

export default Trending;

export const getStaticProps = async () => {
  try {
    const { data } = await Axios.get(`https://myurl/blogs`);
    // 注意：如果打印发现data是数组格式，比如[{id:1, title:'xxx'}, ...]，这里要取对应条目，比如取最新一条就写 const trending = data[0]
    const trending = data;
    return {
      props: {
        trending,
      },
      revalidate: 60 // 可选：每60秒重新生成页面，保证数据新鲜度
    };
  } catch (error) {
    // 接口报错时返回404，避免构建失败
    return {
      notFound: true
    }
  }
};

调试时先看控制台打印的接口返回结构，90%的同类报错都是因为接口返回结构和你预期的不一样，比如返回了包裹层、数组、错误信息对象，导致你读取.title时找不到对应值。

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