全栈公共祈祷日志添加内容时出现TypeError读取'id'未定义错误

我正在开发一款全栈公共祈祷日志应用，支持添加喜爱的圣经经文。但尝试添加祈祷文或经文时，会触发错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')。

相关组件代码 #

useEffect(() => {
    getPrayers().then(setPrayer);
    if (object.id) setFormInput(object);
  }, [object]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormInput((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (object.id) {
      updatePrayer(formInput, object.id)
        .then(() => router.push('/prayers'));
    } else {
      const payload = { ...formInput };
      createPrayer(payload).then(setFormInput(initialState));
    }
  };

createPrayer函数代码 #

const createPrayer = (prayerObj, user) => new Promise((resolve, reject) => {
  const prayer = {
    content: prayerObj.content,
    publication_date: prayerObj.pub_date,
    uid: user.id,
  };
  fetch(`${dbUrl}/prayers`, {
    method: 'POST',
    body: JSON.stringify(prayer),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => resolve(response.json()))
    .catch((error) => reject(error));
});

我尝试过将user.id改为user.uid，也调整过将uid改为user，但问题仍未解决。

问题原因 #

1. createPrayer调用参数缺失：函数定义需要prayerObj和user两个参数，但handleSubmit中调用时只传了payload，没传user，导致函数内user.id访问时user为undefined，触发报错。
2. useEffect中未判断object是否存在：如果初始object是undefined，直接访问object.id也会触发类似错误。

修复方案 #

1. 补全createPrayer的调用参数 #

确保调用时传入用户对象（需从应用的状态、上下文或登录信息中获取）：

const handleSubmit = (e) => {
  e.preventDefault();
  if (object.id) {
    updatePrayer(formInput, object.id)
      .then(() => router.push('/prayers'));
  } else {
    const payload = { ...formInput };
    // 替换为你实际获取用户信息的方式，比如从useState/useContext
    createPrayer(payload, user).then(() => setFormInput(initialState));
  }
};

2. 修复useEffect中的空值判断 #

使用可选链操作符避免object为undefined时的报错：

useEffect(() => {
  getPrayers().then(setPrayer);
  if (object?.id) setFormInput(object);
}, [object]);

3. 给createPrayer添加兜底判断 #

避免用户信息未传入时的报错：

const createPrayer = (prayerObj, user) => new Promise((resolve, reject) => {
  if (!user) {
    return reject(new Error('用户信息未提供'));
  }
  const prayer = {
    content: prayerObj.content,
    publication_date: prayerObj.pub_date,
    uid: user.id, // 若实际用户ID字段是uid，这里改为user.uid
  };
  fetch(`${dbUrl}/prayers`, {
    method: 'POST',
    body: JSON.stringify(prayer),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((response) => resolve(response.json()))
    .catch((error) => reject(error));
});

内容的提问来源于stack exchange，提问作者Soothingcube3