从Supabase取数遇React子元素错误([object Promise])求助

你把React组件定义成了async函数，React组件不能是异步函数——因为异步函数会返回Promise对象，而React无法直接渲染Promise，这就是你看到Error: Objects are not valid as a React child (found: [object Promise])的根本原因。

下面提供两种适配Next.js的修复方案，根据你的渲染需求选择：

方案1：服务器端获取数据（getServerSideProps） #

如果需要每次请求都从服务器获取最新数据，用这种方式：

import Link from "next/link";
import { supabase } from "../../supabase"

function Index({ employees }) {
    // 处理加载状态
    if (!employees.data) return <div>加载中...</div>;
    // 处理错误状态
    if (employees.error) return <div>错误：{employees.error.message}</div>;

    return (
        <>
            <div className="container flex justify-center">
                <h1>Employees</h1>
            </div>

            {/* 给每个元素添加唯一key，避免React警告 */}
            {employees.data.map((employee) => (
                <h1 key={employee.id}>{employee.name}</h1>
            ))}

            <Link href="/employees/addemployee">
                <h1>Add employee</h1>
            </Link>
        </>
    )
}

// 用Next.js的服务器端数据获取函数处理异步逻辑
export async function getServerSideProps() {
    const { data, error } = await supabase.from("Employees").select("*");
    return { props: { employees: { data, error } } };
}

export default Index;

方案2：客户端获取数据（useEffect + useState） #

如果是静态页面，需要在客户端浏览器中获取数据，用这种方式：

import Link from "next/link";
import { supabase } from "../../supabase";
import { useState, useEffect } from "react";

function Index() {
    const [employees, setEmployees] = useState(null);
    const [error, setError] = useState(null);

    // 组件挂载时执行异步数据获取
    useEffect(() => {
        const fetchEmployees = async () => {
            const { data, error } = await supabase.from("Employees").select("*");
            if (error) setError(error);
            else setEmployees(data);
        };

        fetchEmployees();
    }, []);

    if (error) return <div>错误：{error.message}</div>;
    if (!employees) return <div>加载中...</div>;

    return (
        <>
            <div className="container flex justify-center">
                <h1>Employees</h1>
            </div>

            {employees.map((employee) => (
                <h1 key={employee.id}>{employee.name}</h1>
            ))}

            <Link href="/employees/addemployee">
                <h1>Add employee</h1>
            </Link>
        </>
    )
}

export default Index;

• 永远不要将React组件定义为async函数，React要求组件返回JSX元素，而非Promise。
• 遍历列表时必须给每个元素添加唯一的key属性，这是React的强制要求。
• 必须处理加载和错误状态，避免页面空白或出现无意义的报错。

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