Firebase firestore information not rendering whilst using getStaticProps on Next.js

I am trying to fetch data from firebase firestore using Next.js’s getStaticProps. Without using getStaticProps, the data renders normally but when I use it I get the error

res.json() is not a function

This is how my code looks like

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

export const getStaticProps = async () => {
    const res = await getDocs(collection(db, 'blogs'));
    const data = await res.json();

    return {
        props: {
            blogs: data

function index({blogs}) {
  return (
        { => {

export default index

Where could I be going wrong?