Error: React Hook “useEffect” is called conditionally. React Hooks must be called in the exact same order in every component render.Vercelデプロイエラー

export default function ProductDetail({ product }) {
    const [thumbnail, setThumbnail] = useState(product?.image_url[0] || '');
    const [comments, setComments] = useState([]);
    const [text, setText] = useState('');
    const router = useRouter();

    if (!product) {
        return <p>商品が見つかりません</p>;
    }

    // コメントを取得します
    useEffect(() => {
        if (!product) return;
        const fetchComments = async () => {
            const { data: commentData, error: commentError } = await supabase.from('comments')
                .select('*').eq('product', product.id);
            if (commentError) {
                console.log('コメント取得エラー:', commentError.message);
            } else if (commentData) {
                setComments(commentData || []);
            }
        }
        fetchComments();
    }, [product.id]);