I am facing an issue with my NextJS app where I have integrated both Stripe for payment functionality and Firebase for database storage. The user data is successfully stored in Firebase with all the required values, but when trying to fetch it to display on the orders page, I am getting an empty array. The query to fetch the data seems to be successful, however, the data array returned is null.
MY ORDERS PAGE
import Navbar from "@/Components/Navbar";
import React from "react";
import { useSession, getSession } from "next-auth/react";
import { moment } from "moment";
import db from "../../firebase";
import Orderr from "@/Components/Orderr";
function Orders({ orders }) {
const { data: session } = useSession();
console.log(orders);
return (
<div>
<Navbar />
<main className="max-w-screen-lg mx-auto p-10">
<h1 className="border-b mb-2 pb-1 ">Your Orders</h1>
{session ? (
<h2>{orders ? orders.length : 0} orders</h2>
) : (
<h2>Please sign in to see your orders</h2>
)}
<div>
{orders?.map(({ id, amount, items, timestamp, images }) => (
<Orderr
key={id}
id={id}
amount={amount}
items={items}
timestamp={timestamp}
images={images}
/>
))}
</div>
</main>
</div>
);
}
export default Orders;
export async function getServerSideProps(context) {
const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
const session = await getSession(context);
if (!session) {
return {
props: {},
};
}
const stripeOrders = await db
.collection("users")
.doc(session.user.email)
.collection("orders")
.orderBy("timestamp", "desc")
.get();
console.log(stripeOrders);
const orders = await Promise.all(
stripeOrders.docs.map(async (order) => ({
id: order.id,
amount: order.data().amount,
images: order.data().images,
timestamp: moment(order.data().timestamp.toDate()).unix(),
items: (
await stripe.checkout.sessions.listLineItems(order.id, {
limit: 100,
})
).data,
}))
);
console.log(orders);
return {
props: {
orders,
},
};
}
Firebase.js
import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
const firebaseConfig = {
apiKey: "AIzaSyBpb1-3U22I3ajHcTFoUnwIAajzRu64KNo",
authDomain: "meraki-corner.firebaseapp.com",
projectId: "meraki-corner",
storageBucket: "meraki-corner.appspot.com",
messagingSenderId: "384440845152",
appId: "1:384440845152:web:92ce7ab8428ac30c029405",
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
export default db;