Next.js兄弟组件数据共享问题：选中的title.id始终为null

先给你一套经过验证的状态提升实现方案，再列几个常见排查点帮你定位问题：

正确的组件代码示例 #

父组件（状态持有者） #

import { useState } from 'react';
import Navbar from './Navbar';
import DiscussionPage from './DiscussionPage';

function App() {
  // 用空字符串初始化，避免默认状态为null
  const [selectedTitleId, setSelectedTitleId] = useState('');

  const handleTitleSelect = (id) => {
    // 先打印确认拿到的ID是否正确
    console.log('Navbar传递的ID:', id);
    setSelectedTitleId(id);
  };

  return (
    <div className="app-container">
      <Navbar onTitleSelect={handleTitleSelect} />
      <DiscussionPage selectedId={selectedTitleId} />
    </div>
  );
}

export default App;

Navbar组件（触发状态更新） #

function Navbar({ onTitleSelect }) {
  // 假设你的下拉菜单数据
  const titleList = [
    { id: 'discussion-1', title: '前端性能优化' },
    { id: 'discussion-2', title: 'React状态管理' }
  ];

  const handleItemClick = (title) => {
    // 点击下拉项时调用父组件的回调
    onTitleSelect(title.id);
  };

  return (
    <nav className="navbar">
      <div className="dropdown">
        <button>讨论主题</button>
        <ul className="dropdown-menu">
          {titleList.map(title => (
            <li 
              key={title.id} 
              onClick={() => handleItemClick(title)}
            >
              {title.title}
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}

export default Navbar;

DiscussionPage组件（接收状态） #

function DiscussionPage({ selectedId }) {
  console.log('DiscussionPage接收的ID:', selectedId);

  return (
    <div className="discussion-page">
      {selectedId ? (
        <h2>讨论ID: {selectedId}</h2>
      ) : (
        <p>请选择一个讨论主题</p>
      )}
    </div>
  );
}

export default DiscussionPage;

排查要点（针对你的代码） #

• 确认Navbar能拿到正确的title.id：在你触发选中事件的函数里加console.log(title.id)，如果这里输出null，说明你获取ID的方式有问题（比如数据源里的字段名不是id，或者遍历的时候没正确取到）。
• 检查父组件状态更新是否生效：用React DevTools查看父组件的selectedTitleId状态，或者在handleTitleSelect里打印状态值，确认状态是否被正确更新。
• props传递要严格匹配：确保父组件传给DiscussionPage的props名称和组件接收的一致，比如父组件传selectedTitleId，子组件就不能写成selectedID（大小写敏感）。
• 避免初始状态为null：如果你的初始状态设为useState(null)，页面加载时DiscussionPage拿到的就是null，建议用空字符串或默认ID初始化，更容易区分“未选择”和“出错”。
• 事件绑定是否正确：如果是点击下拉项触发，确保点击事件绑定到了每个<li>（或对应元素）上，而不是父容器；如果是select标签，要确认value属性绑定的是title.id。

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