Reactjs 未定义的404和React Hook useEffect缺少依赖项

我有一个超级可爱的花迷网站，在那里你可以找到一个花的简介（一个模拟api），阅读一些信息，并在每一朵花上贴上一张便条。尽管如此，我还是无法让纸条粘在一起。就像前一段时间那样令人沮丧。我已经更新了在Netlify上部署的依赖项和设置。在《邮递员》中，我收到了与控制台中相同的消息，但在404中找不到

我在终端中得到一条消息，React Hook useffect也缺少依赖项（flowerId）

下面您将看到错误消息，这里是指向我的已部署站点的链接：

来自控制台的错误消息

 GET https://flowerinspoapi.netlify.app/flowers/undefined 404

来自Flowerinfo.js的代码

// Fetching the comments for the flowers
const url = "https://flowers-mock-data.firebaseio.com/comments/TheresaUlwahn"

export const FlowerInfo = () => {
  const { flowerId } = useParams()
  const [flower, setFlower] = useState([])
  const [flowerMessages, setFlowerMessages] = useState([])
  const [postedMessage, setPostedMessage] = useState("")

  // Fetching the ID of the flowers 
  useEffect(() => {
    fetch(`https://flowers-mock-data.firebaseio.com/flowers/${flowerId}.json`)
      .then((res) => res.json())
      .then((json) => {
        setFlower(json)
      })
  }, [flowerId])

  // Fetching the messages
  useEffect(() => {
    fetch(`https://flowers-mock-data.firebaseio.com/comments/TheresaUlwahn/${flowerId}.json`)
      .then((res) => res.json())
      .then((json) => {
        console.log('All messages for the flower: ', json)
        if (json !== null) {
          setFlowerMessages(json)
        }
      })
  }, [postedMessage])

  const handleFormSubmit = (flowerId, message) => {
    // console.log('POST THIS MESSAGE: ', message, 'FOR THE FLOWER: ', flowerId);

    fetch(url + `/${flowerId}/.json`, {
      method: "POST",
      body: JSON.stringify({ message }),
      headers: { "Content-Type": "application/json" }
    })
      .then(() => {
        console.log('posted  !')
        // window.location.reload();
        setPostedMessage(message)
      })
      .catch(err => console.log("error:", err))
  }

  var result = Object.keys(flowerMessages).map(function (key) {
    return [key, flowerMessages[key]];
  });