No estoy seguro de por qué tengo este error. ¿Podrías echar un vistazo y aconsejarte?
import React from 'react'; import { client, urlFor } from '../../lib/client'; const ProductDetails = ({ product, products }) => { const { image, name, details, price } = product; return ( <div> <div className='product-detail-container'> <div> <div className='image-container'> <img src={urlFor(image && image[0])} /> </div> </div> </div> </div> ) } export const getStaticPaths = async () => { const query = `*[_type == "product"] { slug { current } } `; const products = await client.fetch(query); const paths = products.map((product) => ({ params: { slug: product.slug.current } })); return { paths, fallback: 'blocking' } } export const getStaticProps = async ({ params: { slug }}) => { const query = `*[_type == "product" && slug.current == '${slug}'][0]`; const productsQuery = '*[_type == "product"]' const product = await client.fetch(query); const products = await client.fetch(productsQuery); console.log(product); return { props: { products, product } } } export default ProductDetailserror: páginas/producto/[slug].js (6:12) @ ProductDetails TypeError: no se puede desestructurar la propiedad 'imagen' de 'producto' porque es nula. 4 | const ProductDetails = ({ producto, productos }) => { 5 |
6 | const { imagen, nombre, detalles, precio } = producto; | ^ 7 | volver ( 8 | 9 |
Vi este tutorial sobre cordura, si obtiene este error cuando hace clic en el producto de banner, debe asegurarse de tener un Producto con el nombre de slug que es el mismo que su entrada de "Producto" en el elemento de Banner.
No sé si mis explicaciones son claras, pero cuando creas un elemento de Banner en Sanity, no creas un Producto, tienes que 'vincularlo'
La respuesta se muestra en el mensaje de error proporcionado:
TypeError: no se puede desestructurar la propiedad 'imagen' de 'producto' porque es nula.
El producto que usa como accesorio para crear una instancia de ProductDetails es nulo.
Si el código anterior es una representación precisa que es difícil de decir debido a la forma en que se presenta la pregunta, entonces el error está en sus consultas a la cordura.
Las funciones getStaticProps y getStaticPaths no consultan correctamente y devuelven un valor nulo en lugar de sus productos.
Creo que esto se debe a que le faltan comillas (comillas invertidas si usa consultas dinámicas) alrededor de la consulta como se muestra a continuación.
export const getStaticPaths = async () => { const query = `*[_type == "product"] { slug { current } }` const products = await client.fetch(query) const paths = products.map((product) => ({ params: { slug: product.slug.current } })) return { paths, fallback: 'blocking' } } export const getStaticProps = async ({ params: { slug } }) => { const query = `*[_type == "product" && slug.current == '${slug}'][0]` const product = await client.fetch(query) const productsQuery = `*[_type == "product"]` const products = await client.fetch(productsQuery) return { props: { products, product } } }