使用SWR从Supabase获取指定帖子评论的问题求助

核心问题分析 #

你当前的问题在于前端没有把目标帖子的ID传递给API接口，或者后端没有正确接收并应用筛选条件，导致Supabase的.eq筛选没有生效，返回了全站评论。

分步解决方案 #

1. 前端传递帖子ID到API

在[slug].js中，需要将当前帖子的ID（或slug）作为参数附加到API请求地址中。假设你已经从页面上下文获取到了帖子的postId：

// 确保你已获取到当前帖子的postId（比如从页面props、路由参数或其他数据中）
const { data: commentList, error } = useSWR(`/api/comments?postId=${postId}`, fetcher);

2. 后端API接收参数并应用筛选

在comments.js的GET请求逻辑中，先获取前端传递的postId，再用它对Supabase的comments表做精准筛选：

import { createClient } from '@supabase/supabase-js';

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const supabase = createClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL,
      process.env.SUPABASE_SERVICE_ROLE_KEY
    );

    // 从请求参数中获取postId
    const { postId } = req.query;

    // 参数校验：缺少postId直接返回错误
    if (!postId) {
      return res.status(400).json({ error: '缺少必填参数postId' });
    }

    // 关键：使用postId筛选评论，注意数据库字段名要和你的表一致
    const { data: comments, error } = await supabase
      .from('comments')
      .select('*')
      .eq('post_id', postId) // 这里的`post_id`是你comments表中存储帖子ID的字段名，需和数据库一致
      .order('created_at', { ascending: false });

    if (error) {
      return res.status(500).json({ error: error.message });
    }

    return res.status(200).json(comments);
  } else {
    res.setHeader('Allow', ['GET']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

常见排查点（如果筛选还是不生效） #

• 字段名匹配问题：检查comments表中存储帖子ID的字段名，比如你可能写成了postId但数据库实际是post_id，字段名不匹配会导致筛选失效。
• 参数有效性检查：在前端console.log(postId)，确认传递的是有效的帖子ID，而非undefined或空值。
• Supabase RLS规则：如果开启了行级安全性（RLS），需要确保你的RLS规则允许查询对应post_id的评论，比如规则可以写为CREATE POLICY "允许查看对应帖子的评论" ON comments FOR SELECT USING (post_id = auth.jwt() ->> 'post_id');（根据你的实际权限逻辑调整）。
• 直接验证数据库查询：在Supabase控制台的SQL编辑器中执行SELECT * FROM comments WHERE post_id = '你的测试帖子ID';，看是否能返回目标评论，排除数据库本身的问题。

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