Next.js渲染Supabase组件时出现HTTP 404错误求助

核心问题分析 #

1. getData函数逻辑错误

   • 函数内部递归调用getData()，会触发无限循环，且未返回获取到的数据，导致调用方无法拿到有效结果。
   • 错误分支仅打印日志后直接return，未返回默认值（如空数组），后续渲染时会因数据为undefined报错。

2. 页面组件错误使用fetch

   • fetch(getData)是完全错误的用法：fetch的参数应为API接口URL，而getData是本地异步函数，直接调用即可获取数据，无需通过fetch发起请求——这也是导致404的直接原因，因为fetch会把函数对象转为字符串作为请求路径，显然不存在这个资源。

3. 渲染阶段变量未定义

   • 渲染时使用Questions.map，但Questions从未在组件中定义，应使用状态中的data进行遍历。

修正后的代码 #

1. app/lib/getData.js

// app/lib/getData.js
import supabase from "./supabaseClient";

export default async function getData() {
    const { data, error } = await supabase
        .from("Questions") // 数据库表名
        .select("*");
    
    if (error) {
        console.error("Error fetching data:", error);
        return []; // 返回空数组，避免后续map操作报错
    }

    console.log("Data fetched from Supabase:", data);
    return data; // 返回获取到的数据给调用方
}

2. app/quiz/page.js

// app/quiz/page.js
"use client";

import { useEffect, useState } from "react";
import getData from "../lib/getData";

export default function Data () {
    const [data, setData] = useState([]); // 初始化为空数组，避免渲染时undefined
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            setLoading(true);
            setError(null);

            try {
                const result = await getData(); // 直接调用本地getData函数获取数据
                setData(result);
            } catch (e) {
                setError(e);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    if (loading) {
        return <p>Loading...</p>;
    }

    if (error) {
        return <p>Error: {error.message}</p>;
    }

    return (
        <div>
            {data.map(item => ( // 使用状态data遍历，变量名改为item避免混淆
                <div key={item.id}> {/* 使用主键id作为key */}
                    {item.description} {/* 渲染description字段 */}
                </div>
            ))}
        </div>
    );
}

额外检查项 #

• 确认Supabase控制台中，Questions表已开启匿名读取权限（在表的"Policies"页面配置）。
• 确保supabaseClient.js中的supabaseUrl和supabaseKey是正确的项目凭证。
• 本地开发无需额外配置CORS，Supabase默认允许localhost请求。

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