求助：解决Next.js中‘Objects are not valid as a React child’报错问题

问题排查与修复 #

1. 最核心的错误：getStaticProps没真正获取页面数据 #

你写的getStaticProps只是构造了查询对象，根本没调用request去DatoCMS拉取真实页面数据！结果pageData是个带query和variables的空结构，不是包含title的实际内容。修改如下：

export const getStaticProps: GetStaticProps = async ({ params }) => {
  // 调用request执行查询，拿到真实数据
  const response = await request({
    query: PAGE_QUERY,
    variables: { slug: params.slug },
  });

  return {
    props: {
      // 从返回结果里取出page对象传给组件
      pageData: response.page,
    }
  };
};

2. Navbar组件的潜在问题 #

报错里的object with keys {children}，十有八九是你在JSX里直接渲染了对象，而非对象的属性：

情况A：text是富文本对象

如果DatoCMS里的navitem.text是富文本字段（不是纯字符串），它会是个带children的对象，直接写{text}就会触发错误。得用DatoCMS的富文本渲染方法：

// 先导入渲染工具
import { renderRichText } from 'react-datocms';

const NavItem = ({ text, path, active }) => {
  return (
    <Link href={`/${path.slug}`}>
     <a>
      {renderRichText(text)} {/* 用这个方法渲染富文本内容 */}
     </a>
    </Link>
  );
};

情况B：path.slug不是字符串

如果path.slug是对象而非字符串，Link的href会异常。要拼成完整的字符串路径：

<Link href={`/${path.slug}`}> {/* 把slug拼成合法的路径字符串 */}

情况C：防止menu_items为空

加个空值判断，避免topNav.menuItems是空数组时报错：

const Navbar = ({ topNav }) => {
  const menu_items = topNav.menuItems?.[0]; // 用可选链避免undefined
  if (!menu_items?.topNavigationItems) return null;

  return (
      <nav>
         {menu_items.topNavigationItems.map((navitem, idx) => (
            <div key={navitem.id || idx}> {/* 优先用唯一id当key，别用text（可能重复） */}
              <NavItem {...navitem} />
            </div>
          ))}
      </nav>
   )
 }

3. 改完后的验证逻辑 #

1. getStaticPaths正常拉取所有slug生成静态路径
2. getStaticProps通过request拿到对应slug的页面数据，传给Page组件
3. Page组件渲染pageData.title（现在是字符串，不会报错）
4. Navbar组件要么处理富文本，要么确保渲染的都是字符串而非对象

按这些步骤修改后，应该就能解决那个React子元素的错误了。

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