Next.js SSR报错：Objects are not valid as a React child 求助

问题根源 #

你遇到的Objects are not valid as a React child (found: [object Promise])错误，核心原因有两个：

1. 代码里的服务端指令拼写错误：'user server'应为'use server'，错误指令可能导致组件行为异常。
2. 若尝试渲染查询结果时，直接使用了未正确提取的Promise或对象（而非基础数据类型），就会触发React的子元素类型校验错误。

修正后的代码 #

'use server'
import { sql } from "@vercel/postgres";

const TodosPage = async () => {
  // 执行查询并提取实际的行数据数组
  const queryResult = await sql`
    SELECT id, text, done FROM todos
    ORDER BY id
  `;
  const todos = queryResult.rows;
  console.log(todos);

  return (
    <div className="p-4">
      <h1 className="text-xl font-bold">To-Do List</h1>
      <ul className="mt-4 space-y-2">
        {/* 遍历数据数组，渲染每个待办项 */}
        {todos.map(todo => (
          <li key={todo.id} className={`p-2 border rounded ${todo.done ? 'bg-gray-100 line-through' : ''}`}>
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodosPage;

关键说明 #

• 修正服务端指令：'use server'是Next.js标识服务端组件的正确指令，拼写错误会导致组件无法按预期在服务端执行。
• 正确提取数据：@vercel/postgres的sql查询返回的是Result对象，需通过.rows属性获取实际的查询结果数组。
• 规范渲染子元素：使用map遍历数组时，必须给每个子元素添加唯一key（这里用todo.id），且仅渲染字符串、数字等React可识别的基础类型（比如todo.text），避免直接渲染对象或Promise。

内容的提问来源于stack exchange，提问作者Hugo Del-Negro