quentin.euillot/portfolioMTP ENFRcv.pdf ↓
cd ../writing

React et Zod : valider les données Supabase avant l'affichage

Le problème

response.json() renvoie une valeur typée any. Une interface TypeScript ne vérifie rien à l'exécution : si la base change, l'erreur apparaît dans un composant, loin de sa cause.

La solution

Un schéma Zod décrit les données et fournit le type :

const result = articleListSchema.safeParse(await response.json());
if (!result.success) throw new Error("Invalid articles response");

Et le contenu Markdown ?

Le contenu est rendu avec react-markdown, jamais avec dangerouslySetInnerHTML. Une balise comme <script>alert(1)</script> s'affiche en texte brut.