MERN栈中无法获取MongoDB文档嵌套对象问题排查

MongoDB中的文档结构如下：

{
   name: "Tesla Inc.",
   category: "Automotive",
   contact: {
     state : {
       name: "Texas",
       city: "Austin", 
         address: {
          streetName: "Tesla Road",
          number: '1'
        } 
     }
  }
}  

使用findOne({ name : "Tesla"})查询后，React端调试时直接打印store显示contact: {…}（展开后为undefined），但JSON.stringify(store)能输出完整嵌套对象。

代码流程 #

1. Express后端路由

storeRoutes.route("/enterprise").get(function (req, res) {
  let db_connect = dbo.getDb("res");

  const query = { name : "Tesla"};
  
  db_connect
  .collection("stores")
  .findOne(query,function (err, result) {
    if (err) throw err;
    res.json(result);
  });
});

直接访问http://localhost:5000/enterprise可返回完整数据：

{"_id":"637e4397f6723844191aa03d","name":"Tesla","category":"Automotive","contact":{"state":{"name":"Texas","city":"Austin","address":{"streetName":"Tesla Road","number":"1"}}}}

2. React前端数据获取函数

function GetEnterprise() {
  const [store, setStore] = useState({})
  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`http://localhost:5000/enterprise`);
  
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        window.alert(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        window.alert(`Record with id  not found`);
        return;
      }     
      setStore(record);
    }      
    fetchData();      
    return;
  }, [1]); 
  
  //debugging
  console.log('tesla: ' + store);
  window.store = store;
  let res_json = JSON.stringify(store);
  console.log('res_json :' + res_json);
  
  return store;
} 

现象 #

• 直接打印store时，contact显示为{…}（浏览器控制台的惰性展示状态，实际代码执行时store仍是初始空对象）
• JSON.stringify(store)能输出完整数据，易造成误解

问题根源 #

1. React状态更新异步性：setStore是异步操作，调用后不会立即更新store状态。useEffect外部的console.log会先执行，此时store还是初始空对象{}。
2. 浏览器控制台惰性求值：控制台中{…}是延迟展示效果，点击展开时会读取当前最新的store值，但代码执行时的store实际为空，因此直接访问store.contact会得到undefined。而JSON.stringify的完整输出，是因为window.store被后续更新的状态覆盖，控制台输出被浏览器“事后更新”导致的误导。

修复步骤 #

1. 调整调试位置：将调试代码放到useEffect内部，或监听store变化：

// 监听store状态变化，更新时打印真实数据
useEffect(() => {
  console.log('updated store:', store);
  console.log('contact data:', store?.contact);
}, [store]);

2. 修正useEffect依赖项：若仅需组件挂载时获取一次数据，依赖项设为空数组[]（原[1]为固定值，不符合React依赖规范）：

useEffect(() => {
  async function fetchData() {
    // ... 原有数据获取逻辑
  }      
  fetchData();      
}, []); // 空数组表示仅在组件挂载时执行一次

3. 优化初始状态：设置贴近数据结构的初始状态，避免读取嵌套属性时报错：

const [store, setStore] = useState({
  contact: {
    state: {
      address: {}
    }
  }
});

或使用可选链操作符store?.contact?.state?.name，避免undefined层级报错。

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