Next.js对接WooCommerce API：数据已传递但无法渲染

我用 Next.js 搭配 WooCommerce REST API 搭建电商网站，目前遇到产品数据无法渲染到前端的问题。已经配置好获取产品的接口，控制台显示数据已传递，但首页用 map 渲染时却提示“无产品”。

控制台显示已成功获取到产品列表，但页面始终显示“No Products Found”。

相关代码 #

import axios from "axios";
import { Albert_Sans, Manrope } from "next/font/google";
import Navbar from "./Blocks/Navbar";
import Hero from "./Component/Hero";
import InfiniteCarousel from "./Component/InfiniteCarousel";
import Logos from "./Component/Logos";
import Category from "./Component/Category";
import("next").InferGetStaticPropsType;

const albert = Albert_Sans({ subsets: ["latin"], weight: ["400", "700"] });
const manrope = Manrope({ subsets: ["latin"] });

export async function getStaticProps() {
  try {
    const { data: products } = await axios.get(
      "http://localhost:3000/api/get-products"
    );

    const data = { products: products || [] };

    return {
      props: data,
    };
  } catch (error) {
    console.error("Error fetching products:", error);
    return {
      props: {
        products: [],
      },
    };
  }
}

export default function Home({ products }) {
  console.log("Products received in Home component:", products);

  return (
    <main
      className={`flex min-h-screen mx-auto bg-dark-shade-1 flex-col items-center ${manrope.className}`}
    >
      <Navbar />
      <Hero />
      <InfiniteCarousel className="w-full" />
      <Logos />
      <Category />
      {products.length > 0 ? (
        <div className="products-container">
          {products.map((product) => (
            <div key={product.id} className="product">
              <h3 className="text-white text-h2">{product.name}</h3>
              <p className="text-white text-l2">{product.price}</p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-white">No Products Found</p>
      )}
    </main>
  );
}

核心问题是你拿到的products不是数组，导致products.length判断失效，进而进入无产品分支。

排查与修复步骤 #

1. 确认接口返回的数据结构
   注意getStaticProps是在服务器端执行的，所以在里面加console.log会输出到终端，不是浏览器控制台：

   export async function getStaticProps() {
     try {
       const { data: products } = await axios.get("http://localhost:3000/api/get-products");
       // 打印接口返回的原始数据，看结构
       console.log('API 返回原始数据:', products);
       console.log('是否是数组:', Array.isArray(products));
       // ... 其他代码
     }
   }
   

   多数情况是接口返回了嵌套结构，比如{ data: [产品数组] }或者{ products: [产品数组] }，你直接把整个响应对象赋值给了products，导致它是个对象而非数组。

2. 调整数据提取逻辑
   根据接口实际返回结构修改，比如如果接口返回{ data: [...] }，就改成：

   const { data: apiResponse } = await axios.get("http://localhost:3000/api/get-products");
   // 确保拿到的是数组，兜底为空数组
   const products = Array.isArray(apiResponse.data) ? apiResponse.data : [];
   

3. 组件内增加数组校验
   在Home组件里判断时，先确认是否是数组，避免非数组调用length报错：

   {Array.isArray(products) && products.length > 0 ? (
     // 渲染产品列表
   ) : (
     <p className="text-white">No Products Found</p>
   )}
   

修改后的完整代码示例 #

import axios from "axios";
import { Albert_Sans, Manrope } from "next/font/google";
import Navbar from "./Blocks/Navbar";
import Hero from "./Component/Hero";
import InfiniteCarousel from "./Component/InfiniteCarousel";
import Logos from "./Component/Logos";
import Category from "./Component/Category";
import("next").InferGetStaticPropsType;

const albert = Albert_Sans({ subsets: ["latin"], weight: ["400", "700"] });
const manrope = Manrope({ subsets: ["latin"] });

export async function getStaticProps() {
  try {
    const { data: apiResponse } = await axios.get(
      "http://localhost:3000/api/get-products"
    );
    // 根据实际接口结构调整，这里假设产品数组在apiResponse.data中
    const products = Array.isArray(apiResponse.data) ? apiResponse.data : [];

    return {
      props: { products },
    };
  } catch (error) {
    console.error("Error fetching products:", error);
    return {
      props: {
        products: [],
      },
    };
  }
}

export default function Home({ products }) {
  console.log("Products received in Home component:", products);
  console.log("Is products array?", Array.isArray(products));

  return (
    <main
      className={`flex min-h-screen mx-auto bg-dark-shade-1 flex-col items-center ${manrope.className}`}
    >
      <Navbar />
      <Hero />
      <InfiniteCarousel className="w-full" />
      <Logos />
      <Category />
      {Array.isArray(products) && products.length > 0 ? (
        <div className="products-container">
          {products.map((product) => (
            <div key={product.id} className="product">
              <h3 className="text-white text-h2">{product.name}</h3>
              <p className="text-white text-l2">{product.price}</p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-white">No Products Found</p>
      )}
    </main>
  );
}

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