Spotify克隆项目Supabase Hook调用及数据查询问题求助

已解决的Hook命名问题 #

最初报错：React Hook "useSupabaseClient"在非React函数组件或自定义Hook的函数"useloadArtistImage"中调用，自定义React Hook名称需以"use"开头
原因是自定义Hook未遵循React规范——所有自定义Hook必须以use开头，且采用驼峰命名。
修正方式：将函数名从useloadArtistImage改为useLoadArtistImage，同时建议文件名和函数名保持统一（当前文件名是useLoadArtistImages.tsx，可调整为useLoadArtistImage.tsx避免混淆）

当前存在的数据库表不存在错误 #

访问localhost:3000/artists时终端报错：

{ code: '42P01', details: null, hint: null, message: 'relation "public.artist" does not exist' }

报错核心原因 #

PostgreSQL提示public.artist表不存在，说明代码查询Supabase时引用的表名有误，或该表尚未在Supabase控制台创建。

相关代码检查 #

自定义Hook文件（useLoadArtistImages.tsx）

import { Artist } from "@/types";
import { useSupabaseClient } from "@supabase/auth-helpers-react";

// 建议：函数名与文件名统一为useLoadArtistImage
const useLoadArtistImage = (artist: Artist) => {
  const supabaseClient = useSupabaseClient();
  if (!artist) {
    return null;
  }
  const { data: imageData } = supabaseClient.storage
    .from("images")
    .getPublicUrl(artist.picture);
  return imageData.publicUrl;
};

export default useLoadArtistImage;

ArtistItem组件（ArtistItem.tsx）

"use client";
import useLoadArtistImage from "@/hooks/useLoadArtistImages";
import { Artist } from "@/types";
import Image from "next/image";

interface ArtistItemProps {
  data: Artist;
  onClick: (id: string) => void;
}
const ArtistItem: React.FC<ArtistItemProps> = ({ data, onClick }) => {
  const imagePath = useLoadArtistImage(data);
   
  // 修正：函数名不能有空格，改为handleClick
  const handleClick = (id: string) => {
    console.log(id);
    onClick(data.id);
  };
  return (
    <div
      onClick={() => handleClick(data.id)}
      className="relative group flex flex-col items-center justify-center rounded-md overflow-hidden gap-4 bg-neutral-400/5 cursor-pointer hover:bg-neutral-400/10 transition p-2 "
    >
      <div className="relative aspect-square w-full h-full rounded-md overflow-hidden bg-neutral-400/5">
        <Image
          className="object-cover"
          fill
          src={imagePath || "/img/avatar.jpg"}
          alt={data.author}
        />
      </div>
      <p className="truncate w-full font-semibold text-center">
        {data?.author}
      </p>
    </div>
  );
};

export default ArtistItem;

解决步骤 #

1. 检查Supabase数据库表

   • 登录Supabase控制台进入项目数据库页面，确认public schema下是否存在artist表（PostgreSQL表名区分大小写，代码中用artist则表名必须为小写）
   • 若表不存在，创建artist表，确保包含id（主键）、author（艺术家名称）、picture（存储图片文件名）等字段，与Artist类型定义匹配

2. 检查Row Level Security（RLS）设置

   • 若artist表已创建，检查RLS是否开启；若开启，需添加允许读取该表的策略（例如允许所有用户读取，或根据认证状态配置权限）

3. 修正组件语法错误

   • 将handle Click改为handleClick，同时修正cursor-pointor拼写错误为cursor-pointer，避免组件渲染异常

4. 确认数据与存储匹配

   • 确保artist表中已插入测试数据，且picture字段的值与Supabase Storage中images桶内的文件名完全对应

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