fix: add null safety to SteamReviews component

This commit is contained in:
2026-04-30 21:38:47 +08:00
parent fccef57d43
commit 90acde90b6
+7 -5
View File
@@ -91,9 +91,11 @@ export function SteamReviews({ gameId, steamAppId, className }: SteamReviewsProp
if (!data?.query_summary) return null; if (!data?.query_summary) return null;
const { query_summary: summary } = data; const { query_summary: summary } = data;
const totalReviews = summary.total_reviews ?? 0;
const totalPositive = summary.total_positive ?? 0;
const positivePercent = const positivePercent =
summary.total_reviews > 0 totalReviews > 0
? Math.round((summary.total_positive / summary.total_reviews) * 100) ? Math.round((totalPositive / totalReviews) * 100)
: 0; : 0;
return ( return (
@@ -103,7 +105,7 @@ export function SteamReviews({ gameId, steamAppId, className }: SteamReviewsProp
<div> <div>
<h3 className="text-lg font-semibold">Steam Reviews</h3> <h3 className="text-lg font-semibold">Steam Reviews</h3>
<p className="text-sm text-zinc-400"> <p className="text-sm text-zinc-400">
{summary.review_score_desc} {positivePercent}% positive ({summary.total_reviews.toLocaleString()} reviews) {summary.review_score_desc ?? "No reviews"} {positivePercent}% positive ({totalReviews.toLocaleString()} reviews)
</p> </p>
</div> </div>
<a <a
@@ -118,7 +120,7 @@ export function SteamReviews({ gameId, steamAppId, className }: SteamReviewsProp
{/* Review cards */} {/* Review cards */}
<div className="space-y-3"> <div className="space-y-3">
{data.reviews.map((review) => ( {(data.reviews ?? []).map((review) => (
<div <div
key={review.recommendationid} key={review.recommendationid}
className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4" className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4"
@@ -138,7 +140,7 @@ export function SteamReviews({ gameId, steamAppId, className }: SteamReviewsProp
</span> </span>
</div> </div>
<span className="text-xs text-zinc-500"> <span className="text-xs text-zinc-500">
{Math.floor(review.author.playtime_forever / 60)}h played {Math.floor((review.author?.playtime_forever ?? 0) / 60)}h played
</span> </span>
</div> </div>
<p className="text-sm text-zinc-300 line-clamp-4">{review.review}</p> <p className="text-sm text-zinc-300 line-clamp-4">{review.review}</p>