在Produto中，您需要访问props（而不是prod）并使用大括号{}。此时您不应该导入/加载任何JSON。

export default function Produto(props) {
  return (
    <figure>
      <img src={props.imagem} alt={props.titulo}></img>
      <figcaption>{props.titulo}</figcaption>
      <p>{props.preco}</p>
      <button className="btn"> Adicionar ao carrinho </button>
    </figure>
  );
}

我会用一个空数组初始化lista状态，并使用一个效果来获取它（推荐使用），或者从JSON文件加载它。此外，如果您使用Array.prototype.map，您应该提供一个key prop。

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useEffect, useState } from "react";

export default function Produtos() {
  const [lista, setLista] = useState([]);

  useEffect(() => {
    setLista(productions);
  }, []);

  return (
    <div className="produtos">
      {lista.map((product) => (
        <Produto key={product.id} id={product.id} {...product} />
      ))}
    </div>
  );
}

您也可以异步加载JSON。

useEffect(() => {
  (async () => {
    const response = await fetch("../data/produtos.json");
    const produtos = await response.json();
    setLista(produtos);
  })();
}, []);

尝试在Map中添加return语句。
下面是代码的片段：

import "./Produtos.css"
import productions from "../data/produtos.json";
import Produto from "./Produto";
import { useState } from "react";

export default function Produtos(props) {
  const [lista, setLista] = useState(productions);
  return (
    <div className="produtos">
      {lista.map((product) => {
       return (
        <div className="Products">
          <Produto id={product.id} {...product} />
        </div>
       )})}
    </div>
  );
}

1-您不需要将数据导入您的Produto组件。其代码应为：

export default function Produto({ prod }) {
    return(
        <figure>
            <img src={prod.imagem}></img>
            <figcaption>{ prod.titulo }</figcaption>
            <p>{ prod.preco }</p>
            <button className='btn'> Adicionar ao carrinho </button>
            
        </figure>
    )
}

您必须将js指令放入parentheses ()中，而不是将它们放入braces {}中
2-就Produtos组件而言，您只需将product作为Produto组件的属性传递

import productions from '../data/produtos.json'
import Produto from "./Produto"
import { useState } from "react";
export default function Produtos(props){
    
    const [lista, setLista] = useState(productions);
    return(
        <div className="produtos">
            {lista.map(product => (
                  <div className="Products">
                    <Produto id={product.id}  prod={product}/>
                  </div>
                ))}            
        </div>
 )
    }