Next.js传递对象至导出函数触发Element类型无效错误及API适配

一、当前错误的核心原因及修复 #

你遇到的Element type is invalid错误主要来自三个问题：

1. SVG文件直接作为组件导入 #

Next.js默认导入SVG时返回的是文件路径对象，并非React组件。你直接将ArrowBack、ArrowNext、Stars当作组件渲染，就会触发类型错误。

2. Slider的Ref使用错误 #

用useState存储Slider实例是错误的，Ref应该用useRef来保存组件实例，而非状态值。

3. 数据字段大小写不匹配 #

模板中写的{listBlogs.Blog}是大写B，但模拟数据里的字段是blog（小写b），会导致内容显示undefined，虽不是当前报错根因，但也需修复。

二、修复后的完整代码 #

import React, { useRef } from "react";
import Image from "next/image";
import Slider from "react-slick";
// 必须导入react-slick的基础样式
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const Blog = ({
  listBlog = [
    {
      name: "mj",
      image: "/assets/jordan.png",
      city: "Wilmington",
      country: "USA",
      rating: "5.0",
      blog: "Wow... MJ is the goat of the sport of basketball no one is remotely close",
    },
    {
      name: "Dj",
      image: "/assets/jeter.png",
      city: "Kalamazoo",
      country: "USA",
      rating: "4.5",
      blog: "5 Time world champion and clutch player of the last 25 years",
    },
    {
      name: "Tyson",
      image: "/assets/tyson.png",
      city: "Brooklyn",
      country: "USA",
      rating: "4.5",
      blog: "One of the most ferocious fighters of our lifetime and a true legend Tyson is the baddest man on the planet!",
    },
    {
      name: "Kobe",
      image: "/assets/kobe.png",
      city: "Philadelphia",
      country: "USA",
      rating: "4.5",
      blog: "The mamba mentality defined Kobe Bryant and his legacy will live on forever",
    },
  ],
}) => {
  const settings = {
    dots: true,
    customPaging: function (i) {
      return (
        <a className="">
          <span className="mx-2 rounded-l-full rounded-r-full h-4 w-4 block cursor-pointer transition-all "></span>
        </a>
      );
    },
    dotsClass: "slick-dots w-max absolute mt-20",
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 2,
    responsive: [
      {
        breakpoint: 770,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  // 用useRef存储Slider实例
  const sliderRef = useRef(null);

  return (
    <>
      <Slider
        {...settings}
        arrows={false}
        ref={sliderRef}
        className="flex items-stretch justify-items-stretch"
      >
        {listBlog.map((listBlogs, index) => (
          <div className="px-3 flex items-stretch" key={index}>
            <div className="border-2 border-gray-500 hover:border-orange-500 transition-all rounded-lg p-8 flex flex-col">
              <div className="flex flex-col xl:flex-row w-full items-stretch xl:items-center">
                <div className="flex order-2 xl:order-1">
                  <Image
                    src={listBlogs.image}
                    height={50}
                    width={50}
                    alt="Icon People"
                  />
                  <div className="flex flex-col ml-5 text-left">
                    <p className="text-lg text-black-600 capitalize">
                      {listBlogs.name}
                    </p>
                    <p className="text-sm text-black-500 capitalize">
                      {listBlogs.city}, {listBlogs.country}
                    </p>
                  </div>
                </div>
                <div className="flex flex-none items-center ml-auto order-1 xl:order-2">
                  <p className="text-sm">{listBlogs.rating}</p>
                  <span className="flex ml-4">
                    {/* 用next/image加载SVG */}
                    <Image
                      src="/assets/Icon/stars.svg"
                      height={16}
                      width={16}
                      alt="Stars"
                      className="h-4 w-4"
                    />
                  </span>
                </div>
              </div>
              {/* 修复字段大小写：Blog -> blog */}
              <p className="mt-5 text-left">“{listBlogs.blog}”.</p>
            </div>
          </div>
        ))}
      </Slider>
      <div className="flex w-full items-center justify-end">
        <div className="flex flex-none justify-between w-auto mt-14">
          <div
            className="mx-4 flex items-center justify-center h-14 w-14 rounded-full bg-white border-orange-500 border hover:bg-orange-500 hover:text-white transition-all text-orange-500 cursor-pointer"
            onClick={() => sliderRef.current?.slickPrev()}
          >
            {/* 用next/image加载SVG */}
            <Image
              src="/assets/Icon/eva_arrow-back-fill.svg"
              height={24}
              width={24}
              alt="Back arrow"
              className="h-6 w-6"
            />
          </div>
          <div
            className="flex items-center justify-center h-14 w-14 rounded-full bg-white border-orange-500 border hover:bg-orange-500 hover:text-white transition-all text-orange-500 cursor-pointer"
            onClick={() => sliderRef.current?.slickNext()}
          >
            {/* 用next/image加载SVG */}
            <Image
              src="/assets/Icon/eva_arrow-next-fill.svg"
              height={24}
              width={24}
              alt="Next arrow"
              className="h-6 w-6"
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default Blog;

三、修复要点说明 #

1. SVG加载修正：将直接导入的SVG组件替换为next/image加载，确保路径与项目文件结构匹配。若想直接把SVG当组件用，可修改next.config.js配置SVGR，但上述方案是最快让代码运行的方式。
2. Ref替换：用useRef替代useState存储Slider实例，调用slickPrev/slickNext时需通过current属性访问。
3. 字段修正：统一数据字段与模板中的大小写，避免显示异常。
4. 样式补充：导入react-slick的默认CSS文件，否则滑块会显示错乱。

四、对接外部API的最优方案 #

1. Next.js场景下的两种常用方式 #

（1）静态生成/服务端渲染（推荐）

若博客内容无需实时更新，用getStaticProps（静态生成）或getServerSideProps（服务端渲染）在页面层获取数据，再传递给Blog组件：

// 页面文件（如pages/blog.js）
export async function getStaticProps() {
  const res = await fetch('https://your-api-url.com/blogs');
  const listBlog = await res.json();
  
  return {
    props: { listBlog },
    revalidate: 86400, // 可选：每天自动重新生成页面
  };
}

export default function BlogPage({ listBlog }) {
  return <Blog listBlog={listBlog} />;
}

（2）客户端请求

若需实时数据或用户交互后获取数据，在组件内部用useEffect结合请求工具：

import { useState, useEffect } from "react";

const Blog = () => {
  const [listBlog, setListBlog] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchBlogs = async () => {
      try {
        const res = await fetch('https://your-api-url.com/blogs');
        const data = await res.json();
        setListBlog(data);
      } catch (err) {
        console.error('请求失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchBlogs();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (!listBlog.length) return <div暂无博客内容</div>;

  // 后续渲染逻辑
};

2. 优化建议 #

• 错误处理：添加请求失败的提示，避免白屏。
• 缓存策略：用SWR或React Query替代手动useEffect，自动处理缓存、重试等逻辑。
• 数据验证：用Zod等工具验证API返回的数据结构，避免后端数据格式错误导致组件崩溃。

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