EJS编译报Unexpected token 'else'错误 如何实现导航栏用户编辑资料下拉功能

1. 报错根本原因 #

你收到的Unexpected token 'else'报错是因为navbar.ejs里的EJS条件判断语法结构混乱：

• 你在<li class="nav-item dropdown">标签结束之前就提前写了<% } %>把if(currentUser)的判断闭合了，后面又多了一个多余的<% } %>，导致后续的else找不到匹配的if
• 存在多余的独立Logout链接，和下拉菜单里的Logout功能重复
• 编辑资料链接里的artist.id未定义，你全局注入的是currentUser变量，应该用currentUser.id取值

2. 修正后的navbar.ejs完整代码 #

把你原来的navbar.ejs替换为以下代码即可解决语法报错：

<nav class="navbar sticky-top navbar-expand-lg navbar-dark" style="background-color: #00305a;">
  <div class="container-fluid">
      <a class="navbar-brand" href="#">Company</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-link active" href="#">Home</a>
            <a class="nav-link active" href="/events">Events</a>
            <a class="nav-link active" href="/artists">Artists</a>
        </div>
        <div class="navbar-nav ms-auto">
          <% if(currentUser) {%> 
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <%= currentUser.username %> <!-- 可替换为你用户表中对应的姓名字段，显示当前登录用户名 -->
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="/artists/<%=currentUser.id%>/edit">Edit profile</a></li>
                <li><a class="dropdown-item" href="/logout">Logout</a></li>
              </ul>
            </li>  
          <% } else { %> 
              <a class="nav-link active" href="/login">Login</a>
              <a class="nav-link active" href="/artists/new">Sign Up</a>
          <% } %>
      </div>
    </div>
  </div>
</nav>

3. 功能校验注意事项 #

• 检查页面是否正确引入了Bootstrap5的JS依赖，下拉菜单需要Bootstrap JS支持才能正常触发展开/收起效果
• 你app.js里的全局变量配置是正确的，无需修改，currentUser已经正常注入到所有EJS模板中

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